@ascentgl/ads-ui 0.0.10 → 0.0.12

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.
@@ -19,10 +19,10 @@ export class AdsVerticalStepperComponent {
19
19
  this.focusedStepIndex = this.steps().findIndex((step) => step.status === VerticalStepStatus.Current);
20
20
  }
21
21
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsVerticalStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
22
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsVerticalStepperComponent, selector: "ads-vertical-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"vertical-stepper\">\n @for (step of steps(); track step; let first = $first; let last = $last; let index = $index) {\n <div class=\"step\" [class.focused]=\"index === focusedStepIndex\" [ngClass]=\"{ clickable: step.onClick }\">\n @if (!first) {\n <div class=\"line-container\">\n <div></div>\n <div></div>\n </div>\n }\n\n <div\n class=\"step-icon-wrapper\"\n (click)=\"step.onClick && step.status !== VerticalStepStatus.Disabled ? step.onClick!(step) : null\"\n [ngClass]=\"step.status\"\n [class.clickable]=\"step.onClick && step.status !== VerticalStepStatus.Disabled\"\n >\n <div class=\"step-icon\" [matTooltip]=\"step.tooltip || ''\" [matTooltipDisabled]=\"!step.tooltip\">\n <ads-icon [name]=\"step.icon\" size=\"sm\" stroke=\"white\" theme=\"white\" />\n </div>\n\n <span class=\"title\">{{ step.title }}</span>\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:flex}.vertical-stepper{display:flex;flex-direction:column}.vertical-stepper .step{display:flex;justify-content:center;align-items:center;flex-direction:column}.vertical-stepper .step .line-container{display:flex;padding:8px 0}.vertical-stepper .step .line-container div{flex:1;height:40px}.vertical-stepper .step .line-container div:first-child{border-right:1px solid var(--color-light)}.vertical-stepper .step .line-container div:last-child{border-left:1px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper{display:flex;align-items:center;flex-direction:column}.vertical-stepper .step .step-icon-wrapper .step-icon{border-radius:80px}.vertical-stepper .step .step-icon-wrapper .title{line-height:21px}.vertical-stepper .step .step-icon-wrapper.clickable{cursor:pointer}.vertical-stepper .step .step-icon-wrapper.completed .step-icon{background-color:var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.current .step-icon{background-color:var(--color-secondary)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon{background-color:var(--color-muted)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon ::ng-deep ads-icon svg{fill:var(--color-light);stroke:var(--color-light)}.vertical-stepper .step .step-icon-wrapper.future .step-icon{background-color:transparent;border:2px solid var(--color-light);padding:10px}.vertical-stepper .step .step-icon-wrapper.future .step-icon ::ng-deep ads-icon svg{fill:var(--color-light);stroke:var(--color-light)}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon{height:16px;padding:12px}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon ads-icon,.vertical-stepper .step:not(.focused) ::ng-deep .step-icon svg{width:16px!important;height:16px!important}.vertical-stepper .step:not(.focused) .title{color:var(--color-medium)}.vertical-stepper .step.focused .step-icon{padding:24px;height:24px}.vertical-stepper .step.focused .title{color:var(--color-dark)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }] }); }
22
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsVerticalStepperComponent, selector: "ads-vertical-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"vertical-stepper\">\n @for (step of steps(); track step; let first = $first; let last = $last; let index = $index) {\n <div class=\"step\" [class.focused]=\"index === focusedStepIndex\" [ngClass]=\"{ clickable: step.onClick }\">\n @if (!first) {\n <div class=\"line-container\">\n <div></div>\n <div></div>\n </div>\n }\n\n <div\n class=\"step-icon-wrapper\"\n (click)=\"step.onClick && step.status !== VerticalStepStatus.Disabled ? step.onClick!(step) : null\"\n [ngClass]=\"step.status\"\n [class.clickable]=\"step.onClick && step.status !== VerticalStepStatus.Disabled\"\n >\n <div class=\"step-icon\" [matTooltip]=\"step.tooltip || ''\" [matTooltipDisabled]=\"!step.tooltip\">\n <ads-icon [name]=\"step.icon\" size=\"sm\" stroke=\"white\" theme=\"white\" />\n </div>\n\n <span class=\"title\">{{ step.title }}</span>\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:flex}.vertical-stepper{display:flex;flex-direction:column}.vertical-stepper .step{display:flex;justify-content:center;align-items:center;flex-direction:column}.vertical-stepper .step .line-container{display:flex;padding:8px 0}.vertical-stepper .step .line-container div{flex:1;height:40px}.vertical-stepper .step .line-container div:first-child{border-right:1px solid var(--color-light)}.vertical-stepper .step .line-container div:last-child{border-left:1px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper{display:flex;align-items:center;flex-direction:column}.vertical-stepper .step .step-icon-wrapper .step-icon{border-radius:80px;display:flex;justify-content:center;align-items:center;box-sizing:border-box}.vertical-stepper .step .step-icon-wrapper .title{line-height:21px}.vertical-stepper .step .step-icon-wrapper.clickable{cursor:pointer}.vertical-stepper .step .step-icon-wrapper.completed .step-icon{background-color:var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.current .step-icon{background-color:var(--color-secondary)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon{background-color:var(--color-muted)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon ::ng-deep ads-icon svg{fill:var(--color-light);stroke:var(--color-light)}.vertical-stepper .step .step-icon-wrapper.future .step-icon{background-color:transparent;border:2px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper.future .step-icon ::ng-deep ads-icon svg{fill:var(--color-light);stroke:var(--color-light)}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon{height:40px;width:40px}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon ads-icon,.vertical-stepper .step:not(.focused) ::ng-deep .step-icon svg{width:16px!important;height:16px!important}.vertical-stepper .step:not(.focused) .title{color:var(--color-medium)}.vertical-stepper .step.focused .step-icon{height:72px;width:72px}.vertical-stepper .step.focused .title{color:var(--color-dark)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }] }); }
23
23
  }
24
24
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsVerticalStepperComponent, decorators: [{
25
25
  type: Component,
26
- args: [{ selector: 'ads-vertical-stepper', template: "<div class=\"vertical-stepper\">\n @for (step of steps(); track step; let first = $first; let last = $last; let index = $index) {\n <div class=\"step\" [class.focused]=\"index === focusedStepIndex\" [ngClass]=\"{ clickable: step.onClick }\">\n @if (!first) {\n <div class=\"line-container\">\n <div></div>\n <div></div>\n </div>\n }\n\n <div\n class=\"step-icon-wrapper\"\n (click)=\"step.onClick && step.status !== VerticalStepStatus.Disabled ? step.onClick!(step) : null\"\n [ngClass]=\"step.status\"\n [class.clickable]=\"step.onClick && step.status !== VerticalStepStatus.Disabled\"\n >\n <div class=\"step-icon\" [matTooltip]=\"step.tooltip || ''\" [matTooltipDisabled]=\"!step.tooltip\">\n <ads-icon [name]=\"step.icon\" size=\"sm\" stroke=\"white\" theme=\"white\" />\n </div>\n\n <span class=\"title\">{{ step.title }}</span>\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:flex}.vertical-stepper{display:flex;flex-direction:column}.vertical-stepper .step{display:flex;justify-content:center;align-items:center;flex-direction:column}.vertical-stepper .step .line-container{display:flex;padding:8px 0}.vertical-stepper .step .line-container div{flex:1;height:40px}.vertical-stepper .step .line-container div:first-child{border-right:1px solid var(--color-light)}.vertical-stepper .step .line-container div:last-child{border-left:1px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper{display:flex;align-items:center;flex-direction:column}.vertical-stepper .step .step-icon-wrapper .step-icon{border-radius:80px}.vertical-stepper .step .step-icon-wrapper .title{line-height:21px}.vertical-stepper .step .step-icon-wrapper.clickable{cursor:pointer}.vertical-stepper .step .step-icon-wrapper.completed .step-icon{background-color:var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.current .step-icon{background-color:var(--color-secondary)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon{background-color:var(--color-muted)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon ::ng-deep ads-icon svg{fill:var(--color-light);stroke:var(--color-light)}.vertical-stepper .step .step-icon-wrapper.future .step-icon{background-color:transparent;border:2px solid var(--color-light);padding:10px}.vertical-stepper .step .step-icon-wrapper.future .step-icon ::ng-deep ads-icon svg{fill:var(--color-light);stroke:var(--color-light)}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon{height:16px;padding:12px}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon ads-icon,.vertical-stepper .step:not(.focused) ::ng-deep .step-icon svg{width:16px!important;height:16px!important}.vertical-stepper .step:not(.focused) .title{color:var(--color-medium)}.vertical-stepper .step.focused .step-icon{padding:24px;height:24px}.vertical-stepper .step.focused .title{color:var(--color-dark)}\n"] }]
26
+ args: [{ selector: 'ads-vertical-stepper', template: "<div class=\"vertical-stepper\">\n @for (step of steps(); track step; let first = $first; let last = $last; let index = $index) {\n <div class=\"step\" [class.focused]=\"index === focusedStepIndex\" [ngClass]=\"{ clickable: step.onClick }\">\n @if (!first) {\n <div class=\"line-container\">\n <div></div>\n <div></div>\n </div>\n }\n\n <div\n class=\"step-icon-wrapper\"\n (click)=\"step.onClick && step.status !== VerticalStepStatus.Disabled ? step.onClick!(step) : null\"\n [ngClass]=\"step.status\"\n [class.clickable]=\"step.onClick && step.status !== VerticalStepStatus.Disabled\"\n >\n <div class=\"step-icon\" [matTooltip]=\"step.tooltip || ''\" [matTooltipDisabled]=\"!step.tooltip\">\n <ads-icon [name]=\"step.icon\" size=\"sm\" stroke=\"white\" theme=\"white\" />\n </div>\n\n <span class=\"title\">{{ step.title }}</span>\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:flex}.vertical-stepper{display:flex;flex-direction:column}.vertical-stepper .step{display:flex;justify-content:center;align-items:center;flex-direction:column}.vertical-stepper .step .line-container{display:flex;padding:8px 0}.vertical-stepper .step .line-container div{flex:1;height:40px}.vertical-stepper .step .line-container div:first-child{border-right:1px solid var(--color-light)}.vertical-stepper .step .line-container div:last-child{border-left:1px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper{display:flex;align-items:center;flex-direction:column}.vertical-stepper .step .step-icon-wrapper .step-icon{border-radius:80px;display:flex;justify-content:center;align-items:center;box-sizing:border-box}.vertical-stepper .step .step-icon-wrapper .title{line-height:21px}.vertical-stepper .step .step-icon-wrapper.clickable{cursor:pointer}.vertical-stepper .step .step-icon-wrapper.completed .step-icon{background-color:var(--color-primary)}.vertical-stepper .step .step-icon-wrapper.current .step-icon{background-color:var(--color-secondary)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon{background-color:var(--color-muted)}.vertical-stepper .step .step-icon-wrapper.disabled .step-icon ::ng-deep ads-icon svg{fill:var(--color-light);stroke:var(--color-light)}.vertical-stepper .step .step-icon-wrapper.future .step-icon{background-color:transparent;border:2px solid var(--color-light)}.vertical-stepper .step .step-icon-wrapper.future .step-icon ::ng-deep ads-icon svg{fill:var(--color-light);stroke:var(--color-light)}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon{height:40px;width:40px}.vertical-stepper .step:not(.focused) ::ng-deep .step-icon ads-icon,.vertical-stepper .step:not(.focused) ::ng-deep .step-icon svg{width:16px!important;height:16px!important}.vertical-stepper .step:not(.focused) .title{color:var(--color-medium)}.vertical-stepper .step.focused .step-icon{height:72px;width:72px}.vertical-stepper .step.focused .title{color:var(--color-dark)}\n"] }]
27
27
  }] });
28
28
  //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVydGljYWwtc3RlcHBlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2Fkcy11aS9zcmMvbGliL2NvbXBvbmVudHMvc3RlcHBlcnMvdmVydGljYWwtc3RlcHBlci92ZXJ0aWNhbC1zdGVwcGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYWRzLXVpL3NyYy9saWIvY29tcG9uZW50cy9zdGVwcGVycy92ZXJ0aWNhbC1zdGVwcGVyL3ZlcnRpY2FsLXN0ZXBwZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN0QyxPQUFPLEVBQUUsU0FBUyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQ2xELE9BQU8sRUFBZ0Isa0JBQWtCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQzs7Ozs7QUFPeEUsTUFBTSxPQUFPLDJCQUEyQjtJQUx4QztRQU1FOztXQUVHO1FBQ0gsVUFBSyxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQWtCLENBQUM7UUFLekMsY0FBYztRQUNLLHVCQUFrQixHQUFHLGtCQUFrQixDQUFDO0tBTTVEO0lBSkMsY0FBYztJQUNkLFFBQVE7UUFDTixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLFNBQVMsQ0FBQyxDQUFDLElBQWtCLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxNQUFNLEtBQUssa0JBQWtCLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDckgsQ0FBQzs4R0FmVSwyQkFBMkI7a0dBQTNCLDJCQUEyQiwrTENUeEMsODlCQXlCQTs7MkZEaEJhLDJCQUEyQjtrQkFMdkMsU0FBUzsrQkFDRSxzQkFBc0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFZlcnRpY2FsU3RlcCwgVmVydGljYWxTdGVwU3RhdHVzIH0gZnJvbSAnLi92ZXJ0aWNhbC1zdGVwLnR5cGUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhZHMtdmVydGljYWwtc3RlcHBlcicsXG4gIHN0eWxlVXJsczogWycuL3ZlcnRpY2FsLXN0ZXBwZXIuY29tcG9uZW50LnNjc3MnXSxcbiAgdGVtcGxhdGVVcmw6ICcuL3ZlcnRpY2FsLXN0ZXBwZXIuY29tcG9uZW50Lmh0bWwnLFxufSlcbmV4cG9ydCBjbGFzcyBBZHNWZXJ0aWNhbFN0ZXBwZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAvKipcbiAgICogVGhlIHN0ZXBzIHRvIGRpc3BsYXlcbiAgICovXG4gIHN0ZXBzID0gaW5wdXQucmVxdWlyZWQ8VmVydGljYWxTdGVwW10+KCk7XG5cbiAgLyoqIEBpZ25vcmUgKi9cbiAgZm9jdXNlZFN0ZXBJbmRleCE6IG51bWJlcjtcblxuICAvKiogQGlnbm9yZSAqL1xuICBwcm90ZWN0ZWQgcmVhZG9ubHkgVmVydGljYWxTdGVwU3RhdHVzID0gVmVydGljYWxTdGVwU3RhdHVzO1xuXG4gIC8qKiBAaWdub3JlICovXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuZm9jdXNlZFN0ZXBJbmRleCA9IHRoaXMuc3RlcHMoKS5maW5kSW5kZXgoKHN0ZXA6IFZlcnRpY2FsU3RlcCkgPT4gc3RlcC5zdGF0dXMgPT09IFZlcnRpY2FsU3RlcFN0YXR1cy5DdXJyZW50KTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInZlcnRpY2FsLXN0ZXBwZXJcIj5cbiAgQGZvciAoc3RlcCBvZiBzdGVwcygpOyB0cmFjayBzdGVwOyBsZXQgZmlyc3QgPSAkZmlyc3Q7IGxldCBsYXN0ID0gJGxhc3Q7IGxldCBpbmRleCA9ICRpbmRleCkge1xuICAgIDxkaXYgY2xhc3M9XCJzdGVwXCIgW2NsYXNzLmZvY3VzZWRdPVwiaW5kZXggPT09IGZvY3VzZWRTdGVwSW5kZXhcIiBbbmdDbGFzc109XCJ7IGNsaWNrYWJsZTogc3RlcC5vbkNsaWNrIH1cIj5cbiAgICAgIEBpZiAoIWZpcnN0KSB7XG4gICAgICAgIDxkaXYgY2xhc3M9XCJsaW5lLWNvbnRhaW5lclwiPlxuICAgICAgICAgIDxkaXY+PC9kaXY+XG4gICAgICAgICAgPGRpdj48L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICB9XG5cbiAgICAgIDxkaXZcbiAgICAgICAgY2xhc3M9XCJzdGVwLWljb24td3JhcHBlclwiXG4gICAgICAgIChjbGljayk9XCJzdGVwLm9uQ2xpY2sgJiYgc3RlcC5zdGF0dXMgIT09IFZlcnRpY2FsU3RlcFN0YXR1cy5EaXNhYmxlZCA/IHN0ZXAub25DbGljayEoc3RlcCkgOiBudWxsXCJcbiAgICAgICAgW25nQ2xhc3NdPVwic3RlcC5zdGF0dXNcIlxuICAgICAgICBbY2xhc3MuY2xpY2thYmxlXT1cInN0ZXAub25DbGljayAmJiBzdGVwLnN0YXR1cyAhPT0gVmVydGljYWxTdGVwU3RhdHVzLkRpc2FibGVkXCJcbiAgICAgID5cbiAgICAgICAgPGRpdiBjbGFzcz1cInN0ZXAtaWNvblwiIFttYXRUb29sdGlwXT1cInN0ZXAudG9vbHRpcCB8fCAnJ1wiIFttYXRUb29sdGlwRGlzYWJsZWRdPVwiIXN0ZXAudG9vbHRpcFwiPlxuICAgICAgICAgIDxhZHMtaWNvbiBbbmFtZV09XCJzdGVwLmljb25cIiBzaXplPVwic21cIiBzdHJva2U9XCJ3aGl0ZVwiIHRoZW1lPVwid2hpdGVcIiAvPlxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8c3BhbiBjbGFzcz1cInRpdGxlXCI+e3sgc3RlcC50aXRsZSB9fTwvc3Bhbj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICB9XG48L2Rpdj5cbiJdfQ==