@sarasanalytics-com/design-system 0.0.21 → 0.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/card-carousel/card-carousel.component.mjs +2 -2
- package/esm2022/lib/form-input/form-input.component.mjs +17 -4
- package/esm2022/lib/left-nav/left-nav.component.mjs +3 -3
- package/esm2022/lib/page-layout/page-layout.component.mjs +12 -0
- package/esm2022/lib/progress-bar/progress-bar.component.mjs +3 -3
- package/esm2022/public-api.mjs +2 -1
- package/esm2022/utils/validators.mjs +3 -3
- package/fesm2022/sarasanalytics-com-design-system.mjs +34 -12
- package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
- package/lib/form-input/form-input.component.d.ts +1 -0
- package/lib/page-layout/page-layout.component.d.ts +5 -0
- package/lib/progress-bar/progress-bar.component.d.ts +1 -1
- package/package.json +2 -2
- package/public-api.d.ts +1 -0
|
@@ -71,10 +71,10 @@ export function workEmailValidation(): AsyncValidatorFn {
|
|
|
71
71
|
export function getValidationMessage(errors) {
|
|
72
72
|
if (errors) {
|
|
73
73
|
if (errors['minlength']) {
|
|
74
|
-
return `
|
|
74
|
+
return `Minimum ${errors['minlength']['requiredLength']} characters required`;
|
|
75
75
|
}
|
|
76
76
|
else if (errors['maxlength']) {
|
|
77
|
-
return `
|
|
77
|
+
return `Maximum of ${errors['maxlength']['requiredLength']} characters accepted`;
|
|
78
78
|
}
|
|
79
79
|
else if (errors['required']) {
|
|
80
80
|
return 'Input cannot be empty';
|
|
@@ -94,4 +94,4 @@ export function getValidationMessage(errors) {
|
|
|
94
94
|
}
|
|
95
95
|
return 'Invalid input';
|
|
96
96
|
}
|
|
97
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
97
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmFsaWRhdG9ycy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy91dGlscy92YWxpZGF0b3JzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlBLE1BQU0sVUFBVSxvQkFBb0IsQ0FBQyxTQUFrQjtJQUNuRCxPQUFPLENBQUMsT0FBd0IsRUFBMkIsRUFBRTtRQUN6RCxNQUFNLG9CQUFvQixHQUFHLFNBQVMsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRSxHQUFHLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztRQUMvRSxJQUFJLG9CQUFvQixJQUFJLENBQUMsQ0FBQyxvQkFBb0IsQ0FBQyxLQUFLLEVBQUUsTUFBTSxFQUFFLENBQUM7WUFDL0QsT0FBTyxDQUFDLEdBQUcsQ0FBQyxXQUFXLEVBQUUsb0JBQW9CLENBQUMsS0FBSyxDQUFDLENBQUM7WUFFckQsSUFBSSxvQkFBb0IsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxLQUFLLENBQUMsRUFBRSxDQUFDO2dCQUN6QyxJQUFJLENBQUMsMkJBQTJCLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDO29CQUNuRCxPQUFPLEVBQUUsT0FBTyxFQUFFLHNCQUFzQixFQUFFLENBQUM7Z0JBQy9DLENBQUM7WUFDTCxDQUFDO1FBQ0wsQ0FBQztRQUNELE9BQU8sSUFBSSxDQUFDO0lBQ2hCLENBQUMsQ0FBQTtBQUNMLENBQUM7QUFFRCxNQUFNLENBQUMsTUFBTSxvQkFBb0IsR0FBRyxDQUNoQyxPQUF3QixFQUNVLEVBQUU7SUFDcEMsTUFBTSxLQUFLLEdBQUcsT0FBTyxDQUFDLEtBQUssQ0FBQztJQUM1QixtRUFBbUU7SUFFbkUsTUFBTSxZQUFZLEdBQUcsbURBQW1ELENBQUM7SUFFekUsSUFBSSxZQUFZLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLFdBQVcsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDO1FBQ25ELE9BQU8sSUFBSSxDQUFDLENBQUMsY0FBYztJQUM3QixDQUFDO1NBQU0sQ0FBQztRQUNOLE9BQU87WUFDTCxPQUFPLEVBQ0wscUZBQXFGO1NBQ3hGLENBQUMsQ0FBQyxnQkFBZ0I7SUFDckIsQ0FBQztBQUNILENBQUMsQ0FBQztBQUNKLE1BQU0sV0FBVyxHQUFHLENBQUMsS0FBYSxFQUFVLEVBQUU7SUFDMUMsTUFBTSxpQkFBaUIsR0FBYSxDQUFDLE9BQU8sRUFBRSxPQUFPLEVBQUUsU0FBUyxDQUFDLENBQUM7SUFDbEUsSUFBRyxLQUFLLEVBQUMsQ0FBQztRQUNSLElBQUksQ0FBQyxRQUFRLEVBQUcsVUFBVSxDQUFDLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUMvQyxLQUFJLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRyxDQUFDLEdBQUcsaUJBQWlCLENBQUMsTUFBTSxFQUFHLENBQUMsRUFBRSxFQUFDLENBQUM7WUFDbEQsSUFBSSxFQUFFLEdBQUcsSUFBSSxNQUFNLENBQUMsS0FBSyxpQkFBaUIsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUM7WUFDckQsSUFBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxFQUFDLENBQUM7Z0JBQ3RCLE9BQU8sS0FBSyxDQUFDO1lBQ2YsQ0FBQztRQUNILENBQUM7UUFDRCxPQUFPLElBQUksQ0FBQztJQUNkLENBQUM7SUFDRCxPQUFPLEtBQUssQ0FBQztBQUNmLENBQUMsQ0FBQTtBQUNIOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBNEJHO0FBQ0gsTUFBTSxVQUFVLG9CQUFvQixDQUFDLE1BQVc7SUFDNUMsSUFBSSxNQUFNLEVBQUUsQ0FBQztRQUNULElBQUksTUFBTSxDQUFDLFdBQVcsQ0FBQyxFQUFFLENBQUM7WUFDdEIsT0FBTyxXQUFXLE1BQU0sQ0FBQyxXQUFXLENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQyxzQkFBc0IsQ0FBQztRQUNsRixDQUFDO2FBQU0sSUFBSSxNQUFNLENBQUMsV0FBVyxDQUFDLEVBQUUsQ0FBQztZQUM3QixPQUFPLGNBQWMsTUFBTSxDQUFDLFdBQVcsQ0FBQyxDQUFDLGdCQUFnQixDQUFDLHNCQUFzQixDQUFDO1FBQ3JGLENBQUM7YUFBTSxJQUFJLE1BQU0sQ0FBQyxVQUFVLENBQUMsRUFBRSxDQUFDO1lBQzVCLE9BQU8sdUJBQXVCLENBQUM7UUFDbkMsQ0FBQzthQUFNLElBQUksTUFBTSxDQUFDLFNBQVMsQ0FBQyxFQUFFLENBQUM7WUFDM0IsT0FBTyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDN0IsQ0FBQzthQUFNLElBQUksTUFBTSxDQUFDLE9BQU8sQ0FBQyxFQUFFLENBQUM7WUFDekIsT0FBTyxxQkFBcUIsQ0FBQztRQUNqQyxDQUFDO2FBQU0sSUFBSSxNQUFNLENBQUMsU0FBUyxDQUFDLEVBQUUsQ0FBQztZQUMzQixPQUFPLDRCQUE0QixDQUFDO1FBQ3hDLENBQUM7YUFBTSxDQUFDO1lBQ0osT0FBTyxlQUFlLENBQUM7UUFDM0IsQ0FBQztJQUNMLENBQUM7SUFDRCxPQUFPLGVBQWUsQ0FBQztBQUMzQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiXG5pbXBvcnQgeyBBYnN0cmFjdENvbnRyb2wsIEFzeW5jVmFsaWRhdG9yRm4sIFZhbGlkYXRpb25FcnJvcnMsIFZhbGlkYXRvckZuIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgY2F0Y2hFcnJvciwgZGVib3VuY2VUaW1lLCBkZWxheSwgZGlzdGluY3RVbnRpbENoYW5nZWQsIG1hcCwgT2JzZXJ2YWJsZSwgb2YsIFN1YmplY3QsIHN3aXRjaE1hcCB9IGZyb20gJ3J4anMnO1xuXG5leHBvcnQgZnVuY3Rpb24gcGhvbmVOdW1iZXJWYWxpZGF0b3IoZGVwZW5kZW50Pzogc3RyaW5nKTogVmFsaWRhdG9yRm4ge1xuICAgIHJldHVybiAoY29udHJvbDogQWJzdHJhY3RDb250cm9sKTogVmFsaWRhdGlvbkVycm9ycyB8IG51bGwgPT4ge1xuICAgICAgICBjb25zdCBkZXBlbmRlbnRGb3JtQ29udHJvbCA9IGRlcGVuZGVudCA/IGNvbnRyb2wucGFyZW50Py5nZXQoZGVwZW5kZW50KSA6IG51bGw7XG4gICAgICAgIGlmIChkZXBlbmRlbnRGb3JtQ29udHJvbCAmJiAhIWRlcGVuZGVudEZvcm1Db250cm9sLnZhbHVlPy5sZW5ndGgpIHtcbiAgICAgICAgICAgIGNvbnNvbGUubG9nKCd2YWxpZGF0b3InLCBkZXBlbmRlbnRGb3JtQ29udHJvbC52YWx1ZSk7XG5cbiAgICAgICAgICAgIGlmIChkZXBlbmRlbnRGb3JtQ29udHJvbC52YWx1ZVswXS5pZCA9PT0gMCkge1xuICAgICAgICAgICAgICAgIGlmICghL15cXCsxWzItOV1cXGR7Mn1bMi05XVxcZHs2fSQvLnRlc3QoY29udHJvbC52YWx1ZSkpIHtcbiAgICAgICAgICAgICAgICAgICAgcmV0dXJuIHsgaW52YWxpZDogJ2ludmFsaWQgcGhvbmUgbnVtYmVyJyB9O1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgICByZXR1cm4gbnVsbDtcbiAgICB9XG59XG5cbmV4cG9ydCBjb25zdCBjdXN0b21FbWFpbFZhbGlkYXRvciA9IChcbiAgICBjb250cm9sOiBBYnN0cmFjdENvbnRyb2xcbiAgKTogeyBba2V5OiBzdHJpbmddOiBzdHJpbmcgfSB8IG51bGwgPT4ge1xuICAgIGNvbnN0IGVtYWlsID0gY29udHJvbC52YWx1ZTtcbiAgICAvLyBSZXBsYWNlIHRoZSByZWd1bGFyIGV4cHJlc3Npb24gd2l0aCB0aGUgcGF0dGVybiB5b3Ugd2FudCB0byB1c2UuXG4gICAgXG4gICAgY29uc3QgZW1haWxQYXR0ZXJuID0gL15bYS16QS1aMC05Ll8lKy1dK0BbYS16QS1aMC05Li1dK1xcLlthLXpBLVpdezIsNH0kLztcbiAgXG4gICAgaWYgKGVtYWlsUGF0dGVybi50ZXN0KGVtYWlsKSAmJiBpc1dvcmtFbWFpbChlbWFpbCkpIHtcbiAgICAgIHJldHVybiBudWxsOyAvLyBWYWxpZCBlbWFpbFxuICAgIH0gZWxzZSB7XG4gICAgICByZXR1cm4ge1xuICAgICAgICBpbnZhbGlkOlxuICAgICAgICAgICdQbGVhc2UgdXNlIGEgd29yayBlbWFpbDsgcGVyc29uYWwgZW1haWxzIChlLmcuLCBAZ21haWwsIEBvdXRsb29rKSBhcmUgbm90IGFjY2VwdGVkLicsXG4gICAgICB9OyAvLyBJbnZhbGlkIGVtYWlsXG4gICAgfVxuICB9O1xuY29uc3QgaXNXb3JrRW1haWwgPSAoZW1haWw6IHN0cmluZyk6IGJvb2xlYW49PntcbiAgICBjb25zdCBpbnZhbGlkRW1haWxIb3N0czogc3RyaW5nW10gPSBbJ2dtYWlsJywgJ3lhaG9vJywgJ2hvdG1haWwnXTtcbiAgICBpZihlbWFpbCl7XG4gICAgICBsZXQgW3VzZXJOYW1lICwgZG9tYWluTmFtZV0gPSBlbWFpbC5zcGxpdCgnQCcpO1xuICAgICAgZm9yKGxldCBpID0gMCA7IGkgPCBpbnZhbGlkRW1haWxIb3N0cy5sZW5ndGggOyBpKyspe1xuICAgICAgICBsZXQgcmUgPSBuZXcgUmVnRXhwKGAuKiR7aW52YWxpZEVtYWlsSG9zdHNbaV19XFwuLipgKTtcbiAgICAgICAgaWYocmUudGVzdChkb21haW5OYW1lKSl7IFxuICAgICAgICAgIHJldHVybiBmYWxzZTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgICAgcmV0dXJuIHRydWU7XG4gICAgfVxuICAgIHJldHVybiBmYWxzZTtcbiAgfVxuLypcbmV4cG9ydCBmdW5jdGlvbiB3b3JrRW1haWxWYWxpZGF0aW9uKCk6IEFzeW5jVmFsaWRhdG9yRm4ge1xuICAgIHJldHVybiAoY29udHJvbDogQWJzdHJhY3RDb250cm9sKTogT2JzZXJ2YWJsZTxWYWxpZGF0aW9uRXJyb3JzIHwgbnVsbD4gPT4ge1xuICAgICAgICBpZiAoIWNvbnRyb2wudmFsdWUpIHtcbiAgICAgICAgICAgIHJldHVybiBvZihudWxsKTsgLy8gTm8gdmFsdWUgdG8gdmFsaWRhdGVcbiAgICAgICAgfVxuXG4gICAgICAgICFjb250cm9sLnBlbmRpbmcgJiYgY29udHJvbC5tYXJrQXNQZW5kaW5nKCk7XG4gICAgICAgIC8vICFjb250cm9sLnRvdWNoZWQgJiYgY29udHJvbC5tYXJrQXNUb3VjaGVkKCk7XG4gICAgICAgIC8vIHJldHVybiBvZih7IGludmFsaWQ6ICdFbnRlciB5b3VyIHdvcmsgZW1haWwnIH0pO1xuICAgICAgICByZXR1cm4gb2YobnVsbCk7XG4gICAgICAgIHJldHVybiBuZXcgT2JzZXJ2YWJsZSgob2IpID0+IHtcbiAgICAgICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgICAgICAgIGlmIChjb250cm9sLnZhbHVlID09PSAnc2FpcmFqQGdtYWlsLmNvbScpXG4gICAgICAgICAgICAgICAgICAgIHJldHVybiBvYi5uZXh0KG51bGwpXG4gICAgICAgICAgICAgICAgcmV0dXJuIG9iLm5leHQoeyBpbnZhbGlkOiAnVGhpcyBpcyBub3QgYSB3b3JrZW1haWwnIH0pO1xuICAgICAgICAgICAgfSwgNTAwKVxuICAgICAgICB9KTtcblxuICAgICAgICByZXR1cm4gb2YoY29udHJvbC52YWx1ZSkucGlwZShcbiAgICAgICAgICAgIGRlbGF5KDUwMCksIC8vIFNpbXVsYXRlIG5ldHdvcmsgZGVsYXlcblxuICAgICAgICAgICAgbWFwKHZhbHVlID0+IHtcbiAgICAgICAgICAgICAgICByZXR1cm4gb2YoeyBpbnZhbGlkOiAnVGhpcyBpcyBub3QgYSB3b3JrZW1haWwnIH0pLy9leGlzdGluZ1VzZXJuYW1lcy5pbmNsdWRlcyh1c2VybmFtZSkgPyB7IHVzZXJuYW1lVGFrZW46IHRydWUgfSA6IG51bGw7XG4gICAgICAgICAgICB9KVxuICAgICAgICAgICAgLy8gY2F0Y2hFcnJvcigoKSA9PiBvZihudWxsKSkgLy8gSGFuZGxlIGFueSBlcnJvcnNcbiAgICAgICAgKTtcbiAgICB9O1xufSovXG5leHBvcnQgZnVuY3Rpb24gZ2V0VmFsaWRhdGlvbk1lc3NhZ2UoZXJyb3JzOiBhbnkpOiBzdHJpbmcge1xuICAgIGlmIChlcnJvcnMpIHtcbiAgICAgICAgaWYgKGVycm9yc1snbWlubGVuZ3RoJ10pIHtcbiAgICAgICAgICAgIHJldHVybiBgTWluaW11bSAke2Vycm9yc1snbWlubGVuZ3RoJ11bJ3JlcXVpcmVkTGVuZ3RoJ119IGNoYXJhY3RlcnMgcmVxdWlyZWRgO1xuICAgICAgICB9IGVsc2UgaWYgKGVycm9yc1snbWF4bGVuZ3RoJ10pIHtcbiAgICAgICAgICAgIHJldHVybiBgTWF4aW11bSBvZiAke2Vycm9yc1snbWF4bGVuZ3RoJ11bJ3JlcXVpcmVkTGVuZ3RoJ119IGNoYXJhY3RlcnMgYWNjZXB0ZWRgO1xuICAgICAgICB9IGVsc2UgaWYgKGVycm9yc1sncmVxdWlyZWQnXSkge1xuICAgICAgICAgICAgcmV0dXJuICdJbnB1dCBjYW5ub3QgYmUgZW1wdHknO1xuICAgICAgICB9IGVsc2UgaWYgKGVycm9yc1snaW52YWxpZCddKSB7XG4gICAgICAgICAgICByZXR1cm4gZXJyb3JzWydpbnZhbGlkJ107XG4gICAgICAgIH0gZWxzZSBpZiAoZXJyb3JzWydlbWFpbCddKSB7XG4gICAgICAgICAgICByZXR1cm4gJ0VudGVyIGEgdmFsaWQgZW1haWwnO1xuICAgICAgICB9IGVsc2UgaWYgKGVycm9yc1sncGF0dGVybiddKSB7XG4gICAgICAgICAgICByZXR1cm4gJ0VudGVyIGEgdmFsaWQgcGhvbmUgbnVtYmVyJztcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHJldHVybiAnSW52YWxpZCBpbnB1dCc7XG4gICAgICAgIH1cbiAgICB9XG4gICAgcmV0dXJuICdJbnZhbGlkIGlucHV0Jztcbn0iXX0=
|
|
@@ -683,11 +683,11 @@ class CardCarouselComponent {
|
|
|
683
683
|
}
|
|
684
684
|
}
|
|
685
685
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
686
|
-
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" }, 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 <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex].body\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <sa-icon [icon]=\"cards[currentIndex].avatarIcon\" size=\"50\"></sa-icon>\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\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\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 $index) {\n <sa-icon [icon]=\"logo.logoIcon\" [class.active]=\"$index === 1\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n }\n </div>\n </div>\n }\n\n\n\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center}.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;max-width:
|
|
686
|
+
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" }, 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 <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex].body\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <sa-icon [icon]=\"cards[currentIndex].avatarIcon\" size=\"50\"></sa-icon>\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\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\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 $index) {\n <sa-icon [icon]=\"logo.logoIcon\" [class.active]=\"$index === 1\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n }\n </div>\n </div>\n }\n\n\n\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center}.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;max-width:17rem}.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);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px)}.brand-logos-container{width:31.25rem;margin-top:var(--medium-32px);overflow:hidden;max-width:31.25rem}.brand-logos{display:flex;gap:var(--medium-24px);transition:transform .3s ease;justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:transform .3s ease,opacity .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}.sa-icon.logo-style>svg{width:fit-content;height:fit-content}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "customWrapperClass", "chip", "body", "avatar", "avatarSize", "icon", "iconSize", "subtitle", "logoIcon", "width", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
687
687
|
}
|
|
688
688
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, decorators: [{
|
|
689
689
|
type: Component,
|
|
690
|
-
args: [{ selector: 'sa-card-carousel', standalone: true, imports: [CardComponent, IconComponent, CardCustomHeaderComponent], encapsulation: ViewEncapsulation.None, 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 <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex].body\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <sa-icon [icon]=\"cards[currentIndex].avatarIcon\" size=\"50\"></sa-icon>\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\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\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 $index) {\n <sa-icon [icon]=\"logo.logoIcon\" [class.active]=\"$index === 1\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n }\n </div>\n </div>\n }\n\n\n\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center}.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;max-width:
|
|
690
|
+
args: [{ selector: 'sa-card-carousel', standalone: true, imports: [CardComponent, IconComponent, CardCustomHeaderComponent], encapsulation: ViewEncapsulation.None, 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 <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex].body\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <sa-icon [icon]=\"cards[currentIndex].avatarIcon\" size=\"50\"></sa-icon>\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\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\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 $index) {\n <sa-icon [icon]=\"logo.logoIcon\" [class.active]=\"$index === 1\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n }\n </div>\n </div>\n }\n\n\n\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center}.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;max-width:17rem}.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);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px)}.brand-logos-container{width:31.25rem;margin-top:var(--medium-32px);overflow:hidden;max-width:31.25rem}.brand-logos{display:flex;gap:var(--medium-24px);transition:transform .3s ease;justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:transform .3s ease,opacity .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}.sa-icon.logo-style>svg{width:fit-content;height:fit-content}\n"] }]
|
|
691
691
|
}], propDecorators: { cards: [{
|
|
692
692
|
type: Input
|
|
693
693
|
}], interval: [{
|
|
@@ -817,10 +817,10 @@ export function workEmailValidation(): AsyncValidatorFn {
|
|
|
817
817
|
function getValidationMessage(errors) {
|
|
818
818
|
if (errors) {
|
|
819
819
|
if (errors['minlength']) {
|
|
820
|
-
return `
|
|
820
|
+
return `Minimum ${errors['minlength']['requiredLength']} characters required`;
|
|
821
821
|
}
|
|
822
822
|
else if (errors['maxlength']) {
|
|
823
|
-
return `
|
|
823
|
+
return `Maximum of ${errors['maxlength']['requiredLength']} characters accepted`;
|
|
824
824
|
}
|
|
825
825
|
else if (errors['required']) {
|
|
826
826
|
return 'Input cannot be empty';
|
|
@@ -944,6 +944,7 @@ class FormInputComponent extends FieldType {
|
|
|
944
944
|
onInput(event) {
|
|
945
945
|
if (this.params?.type === 'tel') {
|
|
946
946
|
this.inputVal = this.inputVal.replace(/[^0-9()+\- ]/g, '');
|
|
947
|
+
this.inputVal = this.hyphenatePhoneNumber();
|
|
947
948
|
}
|
|
948
949
|
this.formControl?.setValue(this.inputVal);
|
|
949
950
|
this.checkValidity();
|
|
@@ -955,6 +956,18 @@ class FormInputComponent extends FieldType {
|
|
|
955
956
|
} as IInputEvent).then(this.onFieldCallback.bind(this));
|
|
956
957
|
}*/
|
|
957
958
|
}
|
|
959
|
+
hyphenatePhoneNumber() {
|
|
960
|
+
let newStr = '';
|
|
961
|
+
let i = 0;
|
|
962
|
+
const value = this.inputVal.replaceAll('-', '');
|
|
963
|
+
const numberOfHyphens = Math.floor(value.length / 3) - ((value.length % 3) ? 1 : 0);
|
|
964
|
+
console.log(value, numberOfHyphens, (value.length % 3));
|
|
965
|
+
for (; i <= numberOfHyphens; i++) {
|
|
966
|
+
newStr = newStr + value.substring(i * 3, 3) + '-';
|
|
967
|
+
console.log(newStr);
|
|
968
|
+
}
|
|
969
|
+
return newStr + value.substring(i * 3);
|
|
970
|
+
}
|
|
958
971
|
onInputFieldClick(event = 'input') {
|
|
959
972
|
if (event === 'input' || event.target.classList.contains('sa-input-field')) {
|
|
960
973
|
this.formInput.nativeElement.focus();
|
|
@@ -973,7 +986,7 @@ class FormInputComponent extends FieldType {
|
|
|
973
986
|
}
|
|
974
987
|
else {
|
|
975
988
|
this.type = 'password';
|
|
976
|
-
this.icon.name = '
|
|
989
|
+
this.icon.name = 'eyeOff';
|
|
977
990
|
}
|
|
978
991
|
this.onInputFieldClick();
|
|
979
992
|
}
|
|
@@ -991,7 +1004,7 @@ class FormInputComponent extends FieldType {
|
|
|
991
1004
|
}
|
|
992
1005
|
}
|
|
993
1006
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
994
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormInputComponent, isStandalone: true, selector: "sa-input", inputs: { icon: "icon" }, viewQueries: [{ propertyName: "formInput", first: true, predicate: ["formInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n @if(pretext || (!!inputVal.length && !!params?.placeholder)){\n <span class=\"sa-input-tag\">{{params?.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 <input matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n [disabled]=\"field.props.disabled || false\" [placeholder]=\"!pretext && params?.placeholder || '' \"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n\n @if(params?.type === 'password'){\n <sa-icon class=\"flex\" icon=\"
|
|
1007
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormInputComponent, isStandalone: true, selector: "sa-input", inputs: { icon: "icon" }, viewQueries: [{ propertyName: "formInput", first: true, predicate: ["formInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n @if(pretext || (!!inputVal.length && !!params?.placeholder)){\n <span class=\"sa-input-tag\">{{params?.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 <input [ngClass]=\"(!!inputVal && params?.type === 'password' && icon.name !== 'eyeFilled') ? 'masked' : ''\" matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n [disabled]=\"field.props.disabled || false\" [placeholder]=\"!pretext && params?.placeholder || '' \"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n\n @if(params?.type === 'password'){\n <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"!icon.name || icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\n <sa-icon class=\"flex\" icon=\"eyeFilled\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"icon.name === 'eyeFilled' ? '' : '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\n\n <!-- <sa-icon [icon]=\"icon\" size=\"24\" (click)=\"inputIconClick()\"></sa-icon> -->\n </div>\n @if((!formControl.valid) || (params && params.supportText)){\n <div class=\"support-label\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle'\">\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n {{getFormSupportText()}}\n </div>\n }\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>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:#e25c61!important}.sa-input-field.invalid{--border: 1px solid #e25c61}.sa-input-field.invalid sa-icon{--form-email-icon-color: #e25c61}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3$1.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"] }] }); }
|
|
995
1008
|
}
|
|
996
1009
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormInputComponent, decorators: [{
|
|
997
1010
|
type: Component,
|
|
@@ -1001,7 +1014,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1001
1014
|
ReactiveFormsModule,
|
|
1002
1015
|
FormlyModule,
|
|
1003
1016
|
IconComponent
|
|
1004
|
-
], template: "<div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n @if(pretext || (!!inputVal.length && !!params?.placeholder)){\n <span class=\"sa-input-tag\">{{params?.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 <input matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n [disabled]=\"field.props.disabled || false\" [placeholder]=\"!pretext && params?.placeholder || '' \"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n\n @if(params?.type === 'password'){\n <sa-icon class=\"flex\" icon=\"
|
|
1017
|
+
], template: "<div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n @if(pretext || (!!inputVal.length && !!params?.placeholder)){\n <span class=\"sa-input-tag\">{{params?.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 <input [ngClass]=\"(!!inputVal && params?.type === 'password' && icon.name !== 'eyeFilled') ? 'masked' : ''\" matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n [disabled]=\"field.props.disabled || false\" [placeholder]=\"!pretext && params?.placeholder || '' \"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n\n @if(params?.type === 'password'){\n <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"!icon.name || icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\n <sa-icon class=\"flex\" icon=\"eyeFilled\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"icon.name === 'eyeFilled' ? '' : '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\n\n <!-- <sa-icon [icon]=\"icon\" size=\"24\" (click)=\"inputIconClick()\"></sa-icon> -->\n </div>\n @if((!formControl.valid) || (params && params.supportText)){\n <div class=\"support-label\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle'\">\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n {{getFormSupportText()}}\n </div>\n }\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>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:#e25c61!important}.sa-input-field.invalid{--border: 1px solid #e25c61}.sa-input-field.invalid sa-icon{--form-email-icon-color: #e25c61}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.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}\n"] }]
|
|
1005
1018
|
}], ctorParameters: () => [], propDecorators: { formInput: [{
|
|
1006
1019
|
type: ViewChild,
|
|
1007
1020
|
args: ['formInput']
|
|
@@ -1239,7 +1252,7 @@ class LeftNavComponent {
|
|
|
1239
1252
|
});
|
|
1240
1253
|
}
|
|
1241
1254
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1242
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LeftNavComponent, isStandalone: true, selector: "sa-left-nav", inputs: { data: "data" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<div class=\"sa-left-nav\">\n\n <div class=\"sa-left-nav-container\">\n <div class=\"sa-left-nav-logo\">\n <!-- <span class=\"sa-logo\"></span> -->\n <sa-icon icon=\"sarasWhite\" size=\"40\"></sa-icon>\n </div>\n <div class=\"sa-left-nav-items\">\n @if(data && data.items && !!data.items.length){\n <div class=\"sa-left-nav-items-container\">\n <ng-container *ngFor=\"let item of data.items; let i = index\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onNavItemClick(item, i, $event)\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(data && data.footerItems && !!data.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar altText=\"ET\" [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 class=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n </ng-container>\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 - 32px);width:calc(100vw - 32px);padding:8px;display:flex}.sa-left-nav-logo{display:block;height:40px;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"
|
|
1255
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LeftNavComponent, isStandalone: true, selector: "sa-left-nav", inputs: { data: "data" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<div class=\"sa-left-nav\">\n\n <div class=\"sa-left-nav-container\">\n <div class=\"sa-left-nav-logo\">\n <!-- <span class=\"sa-logo\"></span> -->\n <sa-icon icon=\"sarasWhite\" size=\"40\"></sa-icon>\n </div>\n <div class=\"sa-left-nav-items\">\n @if(data && data.items && !!data.items.length){\n <div class=\"sa-left-nav-items-container\">\n <ng-container *ngFor=\"let item of data.items; let i = index\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onNavItemClick(item, i, $event)\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(data && data.footerItems && !!data.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar altText=\"ET\" [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 class=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n </ng-container>\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 - 32px);width:calc(100vw - 32px);padding:8px;display:flex}.sa-left-nav-logo{display:block;height:40px;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg 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-900);border-radius:8px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:40px 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-item,.sa-left-nav-footer-item{height:40px;width:40px;margin:8px auto;cursor:pointer;border-radius:4px;display:flex;justify-content:center;align-items:center}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:4px auto}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item.active,.sa-left-nav-footer-item:hover{background-color:var(--primary-500)}.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% - 64px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "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"] }] }); }
|
|
1243
1256
|
}
|
|
1244
1257
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, decorators: [{
|
|
1245
1258
|
type: Component,
|
|
@@ -1247,7 +1260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1247
1260
|
CommonModule,
|
|
1248
1261
|
AvatarComponent,
|
|
1249
1262
|
IconComponent
|
|
1250
|
-
], template: "<div class=\"sa-left-nav\">\n\n <div class=\"sa-left-nav-container\">\n <div class=\"sa-left-nav-logo\">\n <!-- <span class=\"sa-logo\"></span> -->\n <sa-icon icon=\"sarasWhite\" size=\"40\"></sa-icon>\n </div>\n <div class=\"sa-left-nav-items\">\n @if(data && data.items && !!data.items.length){\n <div class=\"sa-left-nav-items-container\">\n <ng-container *ngFor=\"let item of data.items; let i = index\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onNavItemClick(item, i, $event)\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(data && data.footerItems && !!data.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar altText=\"ET\" [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 class=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n </ng-container>\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 - 32px);width:calc(100vw - 32px);padding:8px;display:flex}.sa-left-nav-logo{display:block;height:40px;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"
|
|
1263
|
+
], template: "<div class=\"sa-left-nav\">\n\n <div class=\"sa-left-nav-container\">\n <div class=\"sa-left-nav-logo\">\n <!-- <span class=\"sa-logo\"></span> -->\n <sa-icon icon=\"sarasWhite\" size=\"40\"></sa-icon>\n </div>\n <div class=\"sa-left-nav-items\">\n @if(data && data.items && !!data.items.length){\n <div class=\"sa-left-nav-items-container\">\n <ng-container *ngFor=\"let item of data.items; let i = index\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onNavItemClick(item, i, $event)\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(data && data.footerItems && !!data.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar altText=\"ET\" [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 class=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n </ng-container>\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 - 32px);width:calc(100vw - 32px);padding:8px;display:flex}.sa-left-nav-logo{display:block;height:40px;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg 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-900);border-radius:8px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:40px 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-item,.sa-left-nav-footer-item{height:40px;width:40px;margin:8px auto;cursor:pointer;border-radius:4px;display:flex;justify-content:center;align-items:center}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:4px auto}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item.active,.sa-left-nav-footer-item:hover{background-color:var(--primary-500)}.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% - 64px)}\n"] }]
|
|
1251
1264
|
}], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }], propDecorators: { data: [{
|
|
1252
1265
|
type: Input,
|
|
1253
1266
|
args: ['data']
|
|
@@ -1310,11 +1323,11 @@ class ProgressBarComponent {
|
|
|
1310
1323
|
ngOnInit() {
|
|
1311
1324
|
}
|
|
1312
1325
|
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 }); }
|
|
1313
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ProgressBarComponent, isStandalone: true, selector: "
|
|
1326
|
+
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$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
1314
1327
|
}
|
|
1315
1328
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
1316
1329
|
type: Component,
|
|
1317
|
-
args: [{ selector: '
|
|
1330
|
+
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"] }]
|
|
1318
1331
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { progressValue: [{
|
|
1319
1332
|
type: Input
|
|
1320
1333
|
}], borderRadius: [{
|
|
@@ -1323,6 +1336,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1323
1336
|
type: Input
|
|
1324
1337
|
}] } });
|
|
1325
1338
|
|
|
1339
|
+
class PageLayoutComponent {
|
|
1340
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1341
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PageLayoutComponent, isStandalone: true, selector: "sa-page-layout", ngImport: i0, template: "<div class=\"layout-container\">\n <div class=\"top-content-container\">\n <ng-content select=\"[top-content]\"></ng-content>\n </div>\n <div class=\"content-container\">\n <div class=\"left-section\">\n <ng-content select=\"[left-content]\"></ng-content>\n </div>\n <div class=\"right-section\">\n <ng-content select=\"[right-content]\"></ng-content>\n </div>\n </div>\n</div>", styles: [".layout-container{display:flex;flex-direction:column;height:100vh;border-radius:var(--small-16px, 16px);border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white);box-shadow:3px 4px 16px 4px #00000014;margin:var(--medium-20px);position:relative;overflow-x:hidden}.top-content-container{border-radius:var(--small-16px, 16px);position:absolute;top:0;width:100%}.content-container{display:flex;flex:1}.left-section{flex:1;padding:var(--medium-20px)}.right-section{padding:var(--medium-20px);background:var(--structural-primarytint, #FBFAFF);display:flex;align-items:center}\n"] }); }
|
|
1342
|
+
}
|
|
1343
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PageLayoutComponent, decorators: [{
|
|
1344
|
+
type: Component,
|
|
1345
|
+
args: [{ selector: 'sa-page-layout', standalone: true, imports: [ProgressBarComponent], template: "<div class=\"layout-container\">\n <div class=\"top-content-container\">\n <ng-content select=\"[top-content]\"></ng-content>\n </div>\n <div class=\"content-container\">\n <div class=\"left-section\">\n <ng-content select=\"[left-content]\"></ng-content>\n </div>\n <div class=\"right-section\">\n <ng-content select=\"[right-content]\"></ng-content>\n </div>\n </div>\n</div>", styles: [".layout-container{display:flex;flex-direction:column;height:100vh;border-radius:var(--small-16px, 16px);border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white);box-shadow:3px 4px 16px 4px #00000014;margin:var(--medium-20px);position:relative;overflow-x:hidden}.top-content-container{border-radius:var(--small-16px, 16px);position:absolute;top:0;width:100%}.content-container{display:flex;flex:1}.left-section{flex:1;padding:var(--medium-20px)}.right-section{padding:var(--medium-20px);background:var(--structural-primarytint, #FBFAFF);display:flex;align-items:center}\n"] }]
|
|
1346
|
+
}] });
|
|
1347
|
+
|
|
1326
1348
|
class RadioButtonComponent {
|
|
1327
1349
|
constructor() {
|
|
1328
1350
|
this.options = [];
|
|
@@ -1649,5 +1671,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1649
1671
|
* Generated bundle index. Do not edit.
|
|
1650
1672
|
*/
|
|
1651
1673
|
|
|
1652
|
-
export { AvatarComponent, ButtonComponent, CalendarHeaderComponent, CardBodyComponent, CardCarouselComponent, CardComponent, CardCustomHeaderComponent, CardFooterActionsComponent, CardIconComponent, CardTitleActionsComponent, ChipsComponent, DatepickerComponent, FormInputComponent, FormSelectComponent, GridCellComponent, GuideCardComponent, HeaderComponent, IInputEventType, ILeftNavTypes, IconComponent, IconService, LeftNavComponent, ProgressBarComponent, RadioButtonComponent, ScrollingCardsComponent, SpinnerComponent, StepperComponent, TabsComponent, TestLibraryComponent, TestLibraryService, ToastComponent, ToolTipComponent };
|
|
1674
|
+
export { AvatarComponent, ButtonComponent, CalendarHeaderComponent, CardBodyComponent, CardCarouselComponent, CardComponent, CardCustomHeaderComponent, CardFooterActionsComponent, CardIconComponent, CardTitleActionsComponent, ChipsComponent, DatepickerComponent, FormInputComponent, FormSelectComponent, GridCellComponent, GuideCardComponent, HeaderComponent, IInputEventType, ILeftNavTypes, IconComponent, IconService, LeftNavComponent, PageLayoutComponent, ProgressBarComponent, RadioButtonComponent, ScrollingCardsComponent, SpinnerComponent, StepperComponent, TabsComponent, TestLibraryComponent, TestLibraryService, ToastComponent, ToolTipComponent };
|
|
1653
1675
|
//# sourceMappingURL=sarasanalytics-com-design-system.mjs.map
|