@sarasanalytics-com/design-system 0.0.70 → 0.0.71

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.
Files changed (5) hide show
  1. package/esm2022/lib/card/guide-card/guide-card.component.mjs +8 -6
  2. package/fesm2022/sarasanalytics-com-design-system.mjs +7 -5
  3. package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
  4. package/lib/card/guide-card/guide-card.component.d.ts +3 -3
  5. package/package.json +1 -1
package/esm2022/lib/card/guide-card/guide-card.component.mjs CHANGED
@@ -11,10 +11,12 @@ export class GuideCardComponent {
11
11
  this.selectable = false;
12
12
  this.onStepClicked = new EventEmitter();
13
13
  }
14
- ngOnInit() {
15
- if (this.selectable) {
16
- let selectedStep = _find(this.steps, { isSelected: true });
17
- this.onStepClick(selectedStep);
14
+ ngOnChanges(changes) {
15
+ if ((changes['steps'] || changes['selectable']) && this.selectable) {
16
+ const selectedStep = _find(this.steps, { isSelected: true });
17
+ if (selectedStep) {
18
+ this.onStepClick(selectedStep);
19
+ }
18
20
  }
19
21
  }
20
22
  onStepClick(step) {
@@ -23,7 +25,7 @@ export class GuideCardComponent {
23
25
  this.onStepClicked.emit(step);
24
26
  }
25
27
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GuideCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
26
- 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" }, outputs: { onStepClicked: "onStepClicked" }, 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\">\n <div class=\"step-indicator\">\n @if(selectable) {\n <div [ngClass]=\"step === selectedStep ? 'step-circle-selected': 'step-circle-normal'\">\n </div>\n }@else{\n <div class=\"step-circle\"></div>\n }\n @if (!last) {\n <div class=\"step-line\"></div>\n }\n </div>\n <div class=\"step-content\">\n <div class=\"step-title\" (click)=\"selectable ? onStepClick(step) : null\"\n [ngClass]=\"selectable ? (step === selectedStep ? 'selected-step' : 'other-step') : ''\">\n {{ step.title }}\n @if(step?.chipData) {\n <sa-chip [type]=\"step?.chipData.type\" [state]=\"step?.chipData.state\"\n [filling]=\"step?.chipData.filling\" [text]=\"step?.chipData.text\"\n [iconPosition]='step?.chipData.iconPosition' [iconPath]=\"step?.chipData.iconPath\"></sa-chip>\n }\n </div>\n @if (step?.description) {\n <p class=\"step-description\">{{ step.description }}</p>\n }\n </div>\n </div>\n }\n </div>\n</div>", styles: [".guide-container{background-color:var(--structural-white);border:.0625rem solid var(--grey-100, #eaecf0);border-radius:.5rem;overflow:hidden;padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:2.25rem}.guide-header{border-bottom:.0625rem solid var(--grey-100, #eaecf0);position:relative}.guide-header h1{font-size:1.5rem;color:var(--text-highemphasis, #1C1B20);margin:0}.guide-content{display:flex;flex-direction:column;gap:var(--large-42px)}.step{display:flex}.guide-header .guide-header-title,.step-content .step-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, \"Roboto\");font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:1.5rem;letter-spacing:.03125rem}.step-content .step-description{color:var(--text-lowemphasis, #98A2A3)}.step-indicator{margin-right:1.1575rem;margin-top:.125rem}.step-circle{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:.125rem auto 0}.step-line{width:.125rem;height:calc(100% + 1.75rem);background-color:var(--primary-500);margin:0 auto}.step-content h2{font-size:1.125rem;color:var(--text-highemphasis, #1C1B20);margin:0 0 .625rem}.step-content p{font-size:.875rem;color:var(--text-highemphasis, #1C1B20);margin:0;line-height:1.5}.menu-card-container .step{cursor:pointer}.menu-card-container .step-indicator .step-circle-normal{width:1rem;height:1rem;border-radius:50%;border:.25rem solid #fff;margin:.015rem auto 0;background-color:var(--primary-500)}.menu-card-container .guide-container{border:0;height:calc(100vh - 32.1rem);overflow:scroll;gap:1rem;padding:0}.menu-card-container .step-content .selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);color:#fff;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.menu-card-container .guide-content{gap:var(--medium-32px);overflow-y:scroll;overflow-x:hidden;padding:0rem 1.25rem 1.75rem}.menu-card-container .step-indicator .step-circle-selected{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:0rem auto 0}.menu-card-container .step-indicator{margin-top:.58rem}.menu-card-container .step-content{width:-webkit-fill-available}.menu-card-container .guide-header-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.menu-card-container .step-title{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menu-card-container .guide-header{border-bottom:none;padding:1.75rem 1.875rem 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
28
+ 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" }, 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\">\n <div class=\"step-indicator\">\n @if(selectable) {\n <div [ngClass]=\"step === selectedStep ? 'step-circle-selected': 'step-circle-normal'\">\n </div>\n }@else{\n <div class=\"step-circle\"></div>\n }\n @if (!last) {\n <div class=\"step-line\"></div>\n }\n </div>\n <div class=\"step-content\">\n <div class=\"step-title\" (click)=\"selectable ? onStepClick(step) : null\"\n [ngClass]=\"selectable ? (step === selectedStep ? 'selected-step' : 'other-step') : ''\">\n {{ step.title }}\n @if(step?.chipData) {\n <sa-chip [type]=\"step?.chipData.type\" [state]=\"step?.chipData.state\"\n [filling]=\"step?.chipData.filling\" [text]=\"step?.chipData.text\"\n [iconPosition]='step?.chipData.iconPosition' [iconPath]=\"step?.chipData.iconPath\"></sa-chip>\n }\n </div>\n @if (step?.description) {\n <p class=\"step-description\">{{ step.description }}</p>\n }\n </div>\n </div>\n }\n </div>\n</div>", styles: [".guide-container{background-color:var(--structural-white);border:.0625rem solid var(--grey-100, #eaecf0);border-radius:.5rem;overflow:hidden;padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:2.25rem}.guide-header{border-bottom:.0625rem solid var(--grey-100, #eaecf0);position:relative}.guide-header h1{font-size:1.5rem;color:var(--text-highemphasis, #1C1B20);margin:0}.guide-content{display:flex;flex-direction:column;gap:var(--large-42px)}.step{display:flex}.guide-header .guide-header-title,.step-content .step-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, \"Roboto\");font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:1.5rem;letter-spacing:.03125rem}.step-content .step-description{color:var(--text-lowemphasis, #98A2A3)}.step-indicator{margin-right:1.1575rem;margin-top:.125rem}.step-circle{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:.125rem auto 0}.step-line{width:.125rem;height:calc(100% + 1.75rem);background-color:var(--primary-500);margin:0 auto}.step-content h2{font-size:1.125rem;color:var(--text-highemphasis, #1C1B20);margin:0 0 .625rem}.step-content p{font-size:.875rem;color:var(--text-highemphasis, #1C1B20);margin:0;line-height:1.5}.menu-card-container .step{cursor:pointer}.menu-card-container .step-indicator .step-circle-normal{width:1rem;height:1rem;border-radius:50%;border:.25rem solid #fff;margin:.015rem auto 0;background-color:var(--primary-500)}.menu-card-container .guide-container{border:0;height:calc(100vh - 32.1rem);overflow:scroll;gap:1rem;padding:0}.menu-card-container .step-content .selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);color:#fff;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.menu-card-container .guide-content{gap:var(--medium-32px);overflow-y:scroll;overflow-x:hidden;padding:0rem 1.25rem 1.75rem}.menu-card-container .step-indicator .step-circle-selected{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:0rem auto 0}.menu-card-container .step-indicator{margin-top:.58rem}.menu-card-container .step-content{width:-webkit-fill-available}.menu-card-container .guide-header-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.menu-card-container .step-title{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menu-card-container .guide-header{border-bottom:none;padding:1.75rem 1.875rem 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
27
29
  }
28
30
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GuideCardComponent, decorators: [{
29
31
  type: Component,
@@ -37,4 +39,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
37
39
  }], onStepClicked: [{
38
40
  type: Output
39
41
  }] } });
40
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3VpZGUtY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2NhcmQvZ3VpZGUtY2FyZC9ndWlkZS1jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvY2FyZC9ndWlkZS1jYXJkL2d1aWRlLWNhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUUxRixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQzdELE9BQU8sRUFBdUIsSUFBSSxJQUFJLEtBQUssRUFBRSxNQUFNLFFBQVEsQ0FBQTs7O0FBVTNELE1BQU0sT0FBTyxrQkFBa0I7SUFSL0I7UUFTVyxVQUFLLEdBQVcsRUFBRSxDQUFDO1FBQ25CLFVBQUssR0FBc0IsRUFBRSxDQUFBO1FBQzdCLGVBQVUsR0FBWSxLQUFLLENBQUM7UUFDM0Isa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBYSxDQUFDO0tBZ0J6RDtJQVpDLFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztZQUNwQixJQUFJLFlBQVksR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFBO1lBQzFELElBQUksQ0FBQyxXQUFXLENBQUMsWUFBWSxDQUFDLENBQUE7UUFDaEMsQ0FBQztJQUNILENBQUM7SUFFRCxXQUFXLENBQUMsSUFBUztRQUNuQixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQztRQUN6QixnQ0FBZ0M7UUFDaEMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDaEMsQ0FBQzs4R0FuQlUsa0JBQWtCO2tHQUFsQixrQkFBa0IsNExDZC9CLGtpREFtQ00sc21HRDFCTSxZQUFZLDZIQUFFLGNBQWM7OzJGQUszQixrQkFBa0I7a0JBUjlCLFNBQVM7K0JBQ0UsZUFBZSxjQUNiLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxjQUFjLENBQUMsaUJBR3hCLGlCQUFpQixDQUFDLElBQUk7OEJBRzVCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDSSxhQUFhO3NCQUF0QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBHdWlkZVN0ZXAgfSBmcm9tICcuLi8uLi8uLi9pbnRlcmZhY2VzL2d1aWRlLWNhcmQtaW50ZXJmYWNlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGlwc0NvbXBvbmVudCB9IGZyb20gJy4uLy4uL2NoaXBzL2NoaXBzLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBmb3JFYWNoIGFzIF9mb3JFYWNoLCBmaW5kIGFzIF9maW5kIH0gZnJvbSAnbG9kYXNoJ1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzYS1ndWlkZS1jYXJkJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgQ2hpcHNDb21wb25lbnRdLFxuICB0ZW1wbGF0ZVVybDogJy4vZ3VpZGUtY2FyZC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9ndWlkZS1jYXJkLmNvbXBvbmVudC5jc3MnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lXG59KVxuZXhwb3J0IGNsYXNzIEd1aWRlQ2FyZENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHRpdGxlOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgc3RlcHM6IEd1aWRlU3RlcFtdIHwgYW55ID0gW11cbiAgQElucHV0KCkgc2VsZWN0YWJsZTogYm9vbGVhbiA9IGZhbHNlO1xuICBAT3V0cHV0KCkgb25TdGVwQ2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXI8R3VpZGVTdGVwPigpO1xuICBzZWxlY3RlZFN0ZXA6IGFueTtcbiAgaWNvblBhdGg6ICcuLi9hc3NldHMvdGFyZ2V0U2Nhbk91dGxpbmVkLnN2ZydcblxuICBuZ09uSW5pdCgpIHtcbiAgICBpZiAodGhpcy5zZWxlY3RhYmxlKSB7XG4gICAgICBsZXQgc2VsZWN0ZWRTdGVwID0gX2ZpbmQodGhpcy5zdGVwcywgeyBpc1NlbGVjdGVkOiB0cnVlIH0pXG4gICAgICB0aGlzLm9uU3RlcENsaWNrKHNlbGVjdGVkU3RlcClcbiAgICB9XG4gIH1cblxuICBvblN0ZXBDbGljayhzdGVwOiBhbnkpIHtcbiAgICB0aGlzLnNlbGVjdGVkU3RlcCA9IHN0ZXA7XG4gICAgLy9jb25zb2xlLmxvZyh0aGlzLnNlbGVjdGVkU3RlcClcbiAgICB0aGlzLm9uU3RlcENsaWNrZWQuZW1pdChzdGVwKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImd1aWRlLWNvbnRhaW5lclwiPlxuICAgIDxkaXYgY2xhc3M9XCJndWlkZS1oZWFkZXJcIj5cbiAgICAgICAgPHAgY2xhc3M9XCJndWlkZS1oZWFkZXItdGl0bGVcIj57eyB0aXRsZSB9fTwvcD5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwiZ3VpZGUtY29udGVudFwiPlxuICAgICAgICBAZm9yIChzdGVwIG9mIHN0ZXBzOyB0cmFjayBzdGVwOyBsZXQgbGFzdCA9ICRsYXN0KSB7XG4gICAgICAgIDxkaXYgY2xhc3M9XCJzdGVwXCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwic3RlcC1pbmRpY2F0b3JcIj5cbiAgICAgICAgICAgICAgICBAaWYoc2VsZWN0YWJsZSkge1xuICAgICAgICAgICAgICAgIDxkaXYgW25nQ2xhc3NdPVwic3RlcCA9PT0gc2VsZWN0ZWRTdGVwID8gJ3N0ZXAtY2lyY2xlLXNlbGVjdGVkJzogJ3N0ZXAtY2lyY2xlLW5vcm1hbCdcIj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICB9QGVsc2V7XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInN0ZXAtY2lyY2xlXCI+PC9kaXY+XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIEBpZiAoIWxhc3QpIHtcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwic3RlcC1saW5lXCI+PC9kaXY+XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwic3RlcC1jb250ZW50XCI+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInN0ZXAtdGl0bGVcIiAoY2xpY2spPVwic2VsZWN0YWJsZSA/IG9uU3RlcENsaWNrKHN0ZXApIDogbnVsbFwiXG4gICAgICAgICAgICAgICAgICAgIFtuZ0NsYXNzXT1cInNlbGVjdGFibGUgPyAoc3RlcCA9PT0gc2VsZWN0ZWRTdGVwID8gJ3NlbGVjdGVkLXN0ZXAnIDogJ290aGVyLXN0ZXAnKSA6ICcnXCI+XG4gICAgICAgICAgICAgICAgICAgIHt7IHN0ZXAudGl0bGUgfX1cbiAgICAgICAgICAgICAgICAgICAgQGlmKHN0ZXA/LmNoaXBEYXRhKSB7XG4gICAgICAgICAgICAgICAgICAgIDxzYS1jaGlwIFt0eXBlXT1cInN0ZXA/LmNoaXBEYXRhLnR5cGVcIiBbc3RhdGVdPVwic3RlcD8uY2hpcERhdGEuc3RhdGVcIlxuICAgICAgICAgICAgICAgICAgICAgICAgW2ZpbGxpbmddPVwic3RlcD8uY2hpcERhdGEuZmlsbGluZ1wiIFt0ZXh0XT1cInN0ZXA/LmNoaXBEYXRhLnRleHRcIlxuICAgICAgICAgICAgICAgICAgICAgICAgW2ljb25Qb3NpdGlvbl09J3N0ZXA/LmNoaXBEYXRhLmljb25Qb3NpdGlvbicgW2ljb25QYXRoXT1cInN0ZXA/LmNoaXBEYXRhLmljb25QYXRoXCI+PC9zYS1jaGlwPlxuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgQGlmIChzdGVwPy5kZXNjcmlwdGlvbikge1xuICAgICAgICAgICAgICAgIDxwIGNsYXNzPVwic3RlcC1kZXNjcmlwdGlvblwiPnt7IHN0ZXAuZGVzY3JpcHRpb24gfX08L3A+XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICB9XG4gICAgPC9kaXY+XG48L2Rpdj4iXX0=
42
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3VpZGUtY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2NhcmQvZ3VpZGUtY2FyZC9ndWlkZS1jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvY2FyZC9ndWlkZS1jYXJkL2d1aWRlLWNhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxpQkFBaUIsRUFBNEIsTUFBTSxlQUFlLENBQUM7QUFFcEgsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUM3RCxPQUFPLEVBQXVCLElBQUksSUFBSSxLQUFLLEVBQUUsTUFBTSxRQUFRLENBQUE7OztBQVUzRCxNQUFNLE9BQU8sa0JBQWtCO0lBUi9CO1FBU1csVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUNuQixVQUFLLEdBQXNCLEVBQUUsQ0FBQTtRQUM3QixlQUFVLEdBQVksS0FBSyxDQUFDO1FBQzNCLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQWEsQ0FBQztLQWtCekQ7SUFkQyxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsSUFBSSxPQUFPLENBQUMsWUFBWSxDQUFDLENBQUMsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7WUFDbkUsTUFBTSxZQUFZLEdBQUcsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQztZQUM3RCxJQUFJLFlBQVksRUFBRSxDQUFDO2dCQUNqQixJQUFJLENBQUMsV0FBVyxDQUFDLFlBQVksQ0FBQyxDQUFDO1lBQ2pDLENBQUM7UUFDSCxDQUFDO0lBQ0gsQ0FBQztJQUVELFdBQVcsQ0FBQyxJQUFTO1FBQ25CLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDO1FBQ3pCLGdDQUFnQztRQUNoQyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNoQyxDQUFDOzhHQXJCVSxrQkFBa0I7a0dBQWxCLGtCQUFrQixpTkNkL0Isa2lEQW1DTSxzbUdEMUJNLFlBQVksNkhBQUUsY0FBYzs7MkZBSzNCLGtCQUFrQjtrQkFSOUIsU0FBUzsrQkFDRSxlQUFlLGNBQ2IsSUFBSSxXQUNQLENBQUMsWUFBWSxFQUFFLGNBQWMsQ0FBQyxpQkFHeEIsaUJBQWlCLENBQUMsSUFBSTs4QkFHNUIsS0FBSztzQkFBYixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNJLGFBQWE7c0JBQXRCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciwgVmlld0VuY2Fwc3VsYXRpb24sIE9uQ2hhbmdlcywgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgR3VpZGVTdGVwIH0gZnJvbSAnLi4vLi4vLi4vaW50ZXJmYWNlcy9ndWlkZS1jYXJkLWludGVyZmFjZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ2hpcHNDb21wb25lbnQgfSBmcm9tICcuLi8uLi9jaGlwcy9jaGlwcy5jb21wb25lbnQnO1xuaW1wb3J0IHsgZm9yRWFjaCBhcyBfZm9yRWFjaCwgZmluZCBhcyBfZmluZCB9IGZyb20gJ2xvZGFzaCdcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2EtZ3VpZGUtY2FyZCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIENoaXBzQ29tcG9uZW50XSxcbiAgdGVtcGxhdGVVcmw6ICcuL2d1aWRlLWNhcmQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9ndWlkZS1jYXJkLmNvbXBvbmVudC5jc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZVxufSlcbmV4cG9ydCBjbGFzcyBHdWlkZUNhcmRDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICBASW5wdXQoKSB0aXRsZTogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIHN0ZXBzOiBHdWlkZVN0ZXBbXSB8IGFueSA9IFtdXG4gIEBJbnB1dCgpIHNlbGVjdGFibGU6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQE91dHB1dCgpIG9uU3RlcENsaWNrZWQgPSBuZXcgRXZlbnRFbWl0dGVyPEd1aWRlU3RlcD4oKTtcbiAgc2VsZWN0ZWRTdGVwOiBhbnk7XG4gIGljb25QYXRoOiAnLi4vYXNzZXRzL3RhcmdldFNjYW5PdXRsaW5lZC5zdmcnXG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmICgoY2hhbmdlc1snc3RlcHMnXSB8fCBjaGFuZ2VzWydzZWxlY3RhYmxlJ10pICYmIHRoaXMuc2VsZWN0YWJsZSkge1xuICAgICAgY29uc3Qgc2VsZWN0ZWRTdGVwID0gX2ZpbmQodGhpcy5zdGVwcywgeyBpc1NlbGVjdGVkOiB0cnVlIH0pO1xuICAgICAgaWYgKHNlbGVjdGVkU3RlcCkge1xuICAgICAgICB0aGlzLm9uU3RlcENsaWNrKHNlbGVjdGVkU3RlcCk7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgb25TdGVwQ2xpY2soc3RlcDogYW55KSB7XG4gICAgdGhpcy5zZWxlY3RlZFN0ZXAgPSBzdGVwO1xuICAgIC8vY29uc29sZS5sb2codGhpcy5zZWxlY3RlZFN0ZXApXG4gICAgdGhpcy5vblN0ZXBDbGlja2VkLmVtaXQoc3RlcCk7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJndWlkZS1jb250YWluZXJcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZ3VpZGUtaGVhZGVyXCI+XG4gICAgICAgIDxwIGNsYXNzPVwiZ3VpZGUtaGVhZGVyLXRpdGxlXCI+e3sgdGl0bGUgfX08L3A+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImd1aWRlLWNvbnRlbnRcIj5cbiAgICAgICAgQGZvciAoc3RlcCBvZiBzdGVwczsgdHJhY2sgc3RlcDsgbGV0IGxhc3QgPSAkbGFzdCkge1xuICAgICAgICA8ZGl2IGNsYXNzPVwic3RlcFwiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInN0ZXAtaW5kaWNhdG9yXCI+XG4gICAgICAgICAgICAgICAgQGlmKHNlbGVjdGFibGUpIHtcbiAgICAgICAgICAgICAgICA8ZGl2IFtuZ0NsYXNzXT1cInN0ZXAgPT09IHNlbGVjdGVkU3RlcCA/ICdzdGVwLWNpcmNsZS1zZWxlY3RlZCc6ICdzdGVwLWNpcmNsZS1ub3JtYWwnXCI+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgfUBlbHNle1xuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzdGVwLWNpcmNsZVwiPjwvZGl2PlxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICBAaWYgKCFsYXN0KSB7XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInN0ZXAtbGluZVwiPjwvZGl2PlxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInN0ZXAtY29udGVudFwiPlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzdGVwLXRpdGxlXCIgKGNsaWNrKT1cInNlbGVjdGFibGUgPyBvblN0ZXBDbGljayhzdGVwKSA6IG51bGxcIlxuICAgICAgICAgICAgICAgICAgICBbbmdDbGFzc109XCJzZWxlY3RhYmxlID8gKHN0ZXAgPT09IHNlbGVjdGVkU3RlcCA/ICdzZWxlY3RlZC1zdGVwJyA6ICdvdGhlci1zdGVwJykgOiAnJ1wiPlxuICAgICAgICAgICAgICAgICAgICB7eyBzdGVwLnRpdGxlIH19XG4gICAgICAgICAgICAgICAgICAgIEBpZihzdGVwPy5jaGlwRGF0YSkge1xuICAgICAgICAgICAgICAgICAgICA8c2EtY2hpcCBbdHlwZV09XCJzdGVwPy5jaGlwRGF0YS50eXBlXCIgW3N0YXRlXT1cInN0ZXA/LmNoaXBEYXRhLnN0YXRlXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIFtmaWxsaW5nXT1cInN0ZXA/LmNoaXBEYXRhLmZpbGxpbmdcIiBbdGV4dF09XCJzdGVwPy5jaGlwRGF0YS50ZXh0XCJcbiAgICAgICAgICAgICAgICAgICAgICAgIFtpY29uUG9zaXRpb25dPSdzdGVwPy5jaGlwRGF0YS5pY29uUG9zaXRpb24nIFtpY29uUGF0aF09XCJzdGVwPy5jaGlwRGF0YS5pY29uUGF0aFwiPjwvc2EtY2hpcD5cbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIEBpZiAoc3RlcD8uZGVzY3JpcHRpb24pIHtcbiAgICAgICAgICAgICAgICA8cCBjbGFzcz1cInN0ZXAtZGVzY3JpcHRpb25cIj57eyBzdGVwLmRlc2NyaXB0aW9uIH19PC9wPlxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgfVxuICAgIDwvZGl2PlxuPC9kaXY+Il19
package/fesm2022/sarasanalytics-com-design-system.mjs CHANGED
@@ -795,10 +795,12 @@ class GuideCardComponent {
795
795
  this.selectable = false;
796
796
  this.onStepClicked = new EventEmitter();
797
797
  }
798
- ngOnInit() {
799
- if (this.selectable) {
800
- let selectedStep = find(this.steps, { isSelected: true });
801
- this.onStepClick(selectedStep);
798
+ ngOnChanges(changes) {
799
+ if ((changes['steps'] || changes['selectable']) && this.selectable) {
800
+ const selectedStep = find(this.steps, { isSelected: true });
801
+ if (selectedStep) {
802
+ this.onStepClick(selectedStep);
803
+ }
802
804
  }
803
805
  }
804
806
  onStepClick(step) {
@@ -807,7 +809,7 @@ class GuideCardComponent {
807
809
  this.onStepClicked.emit(step);
808
810
  }
809
811
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GuideCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
810
- 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" }, outputs: { onStepClicked: "onStepClicked" }, 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\">\n <div class=\"step-indicator\">\n @if(selectable) {\n <div [ngClass]=\"step === selectedStep ? 'step-circle-selected': 'step-circle-normal'\">\n </div>\n }@else{\n <div class=\"step-circle\"></div>\n }\n @if (!last) {\n <div class=\"step-line\"></div>\n }\n </div>\n <div class=\"step-content\">\n <div class=\"step-title\" (click)=\"selectable ? onStepClick(step) : null\"\n [ngClass]=\"selectable ? (step === selectedStep ? 'selected-step' : 'other-step') : ''\">\n {{ step.title }}\n @if(step?.chipData) {\n <sa-chip [type]=\"step?.chipData.type\" [state]=\"step?.chipData.state\"\n [filling]=\"step?.chipData.filling\" [text]=\"step?.chipData.text\"\n [iconPosition]='step?.chipData.iconPosition' [iconPath]=\"step?.chipData.iconPath\"></sa-chip>\n }\n </div>\n @if (step?.description) {\n <p class=\"step-description\">{{ step.description }}</p>\n }\n </div>\n </div>\n }\n </div>\n</div>", styles: [".guide-container{background-color:var(--structural-white);border:.0625rem solid var(--grey-100, #eaecf0);border-radius:.5rem;overflow:hidden;padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:2.25rem}.guide-header{border-bottom:.0625rem solid var(--grey-100, #eaecf0);position:relative}.guide-header h1{font-size:1.5rem;color:var(--text-highemphasis, #1C1B20);margin:0}.guide-content{display:flex;flex-direction:column;gap:var(--large-42px)}.step{display:flex}.guide-header .guide-header-title,.step-content .step-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, \"Roboto\");font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:1.5rem;letter-spacing:.03125rem}.step-content .step-description{color:var(--text-lowemphasis, #98A2A3)}.step-indicator{margin-right:1.1575rem;margin-top:.125rem}.step-circle{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:.125rem auto 0}.step-line{width:.125rem;height:calc(100% + 1.75rem);background-color:var(--primary-500);margin:0 auto}.step-content h2{font-size:1.125rem;color:var(--text-highemphasis, #1C1B20);margin:0 0 .625rem}.step-content p{font-size:.875rem;color:var(--text-highemphasis, #1C1B20);margin:0;line-height:1.5}.menu-card-container .step{cursor:pointer}.menu-card-container .step-indicator .step-circle-normal{width:1rem;height:1rem;border-radius:50%;border:.25rem solid #fff;margin:.015rem auto 0;background-color:var(--primary-500)}.menu-card-container .guide-container{border:0;height:calc(100vh - 32.1rem);overflow:scroll;gap:1rem;padding:0}.menu-card-container .step-content .selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);color:#fff;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.menu-card-container .guide-content{gap:var(--medium-32px);overflow-y:scroll;overflow-x:hidden;padding:0rem 1.25rem 1.75rem}.menu-card-container .step-indicator .step-circle-selected{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:0rem auto 0}.menu-card-container .step-indicator{margin-top:.58rem}.menu-card-container .step-content{width:-webkit-fill-available}.menu-card-container .guide-header-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.menu-card-container .step-title{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menu-card-container .guide-header{border-bottom:none;padding:1.75rem 1.875rem 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
812
+ 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" }, 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\">\n <div class=\"step-indicator\">\n @if(selectable) {\n <div [ngClass]=\"step === selectedStep ? 'step-circle-selected': 'step-circle-normal'\">\n </div>\n }@else{\n <div class=\"step-circle\"></div>\n }\n @if (!last) {\n <div class=\"step-line\"></div>\n }\n </div>\n <div class=\"step-content\">\n <div class=\"step-title\" (click)=\"selectable ? onStepClick(step) : null\"\n [ngClass]=\"selectable ? (step === selectedStep ? 'selected-step' : 'other-step') : ''\">\n {{ step.title }}\n @if(step?.chipData) {\n <sa-chip [type]=\"step?.chipData.type\" [state]=\"step?.chipData.state\"\n [filling]=\"step?.chipData.filling\" [text]=\"step?.chipData.text\"\n [iconPosition]='step?.chipData.iconPosition' [iconPath]=\"step?.chipData.iconPath\"></sa-chip>\n }\n </div>\n @if (step?.description) {\n <p class=\"step-description\">{{ step.description }}</p>\n }\n </div>\n </div>\n }\n </div>\n</div>", styles: [".guide-container{background-color:var(--structural-white);border:.0625rem solid var(--grey-100, #eaecf0);border-radius:.5rem;overflow:hidden;padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:2.25rem}.guide-header{border-bottom:.0625rem solid var(--grey-100, #eaecf0);position:relative}.guide-header h1{font-size:1.5rem;color:var(--text-highemphasis, #1C1B20);margin:0}.guide-content{display:flex;flex-direction:column;gap:var(--large-42px)}.step{display:flex}.guide-header .guide-header-title,.step-content .step-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, \"Roboto\");font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:1.5rem;letter-spacing:.03125rem}.step-content .step-description{color:var(--text-lowemphasis, #98A2A3)}.step-indicator{margin-right:1.1575rem;margin-top:.125rem}.step-circle{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:.125rem auto 0}.step-line{width:.125rem;height:calc(100% + 1.75rem);background-color:var(--primary-500);margin:0 auto}.step-content h2{font-size:1.125rem;color:var(--text-highemphasis, #1C1B20);margin:0 0 .625rem}.step-content p{font-size:.875rem;color:var(--text-highemphasis, #1C1B20);margin:0;line-height:1.5}.menu-card-container .step{cursor:pointer}.menu-card-container .step-indicator .step-circle-normal{width:1rem;height:1rem;border-radius:50%;border:.25rem solid #fff;margin:.015rem auto 0;background-color:var(--primary-500)}.menu-card-container .guide-container{border:0;height:calc(100vh - 32.1rem);overflow:scroll;gap:1rem;padding:0}.menu-card-container .step-content .selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);color:#fff;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.menu-card-container .guide-content{gap:var(--medium-32px);overflow-y:scroll;overflow-x:hidden;padding:0rem 1.25rem 1.75rem}.menu-card-container .step-indicator .step-circle-selected{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:0rem auto 0}.menu-card-container .step-indicator{margin-top:.58rem}.menu-card-container .step-content{width:-webkit-fill-available}.menu-card-container .guide-header-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.menu-card-container .step-title{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menu-card-container .guide-header{border-bottom:none;padding:1.75rem 1.875rem 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
811
813
  }
812
814
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GuideCardComponent, decorators: [{
813
815
  type: Component,