@ascentgl/ads-ui 20.0.37 → 20.0.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ascentgl-ads-ui.mjs +2 -2
- package/fesm2022/ascentgl-ads-ui.mjs.map +1 -1
- package/index.d.ts +1 -1
- package/package.json +13 -13
|
@@ -7951,11 +7951,11 @@ class AdsProgressStepperComponent {
|
|
|
7951
7951
|
return Math.floor((this.window.innerWidth - this.containerPadding) / stepWidth);
|
|
7952
7952
|
}
|
|
7953
7953
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AdsProgressStepperComponent, deps: [{ token: i0.Renderer2 }, { token: i1.AdsIconRegistry }, { token: Window }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7954
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: AdsProgressStepperComponent, isStandalone: false, selector: "
|
|
7954
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: AdsProgressStepperComponent, isStandalone: false, selector: "ads-progress-stepper", inputs: { isMobile: "isMobile", containerPadding: "containerPadding", steps: "steps" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }, { propertyName: "stepElements", predicate: ["stepElements"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #stepper\n adsGesture\n class=\"progress-stepper\"\n [ngStyle]=\"styles?.step\"\n [draggable]=\"false\"\n (gestureleft)=\"onSwipeLeft()\"\n (gestureright)=\"onSwipeRight()\"\n>\n @for (step of steps; track $index; let first = $first; let last = $last) {\n <div\n #stepElements\n class=\"progress-stepper-step\"\n [draggable]=\"false\"\n >\n <div class=\"progress-bar\" [class.first]=\"first\" [class.last]=\"last\">\n <div\n class=\"progress-bar-highlight\"\n [class.completed]=\"step.completed\"\n [class.roundedLeft]=\"first || (!steps[$index - 1].completed && step.completed)\"\n [class.roundedRight]=\"\n last || (!steps[$index + 1].completed && step.completed) || (first && !steps[$index + 1].completed)\n \"\n ></div>\n </div>\n <div class=\"progress-step-info\" [class.first]=\"first\" [class.last]=\"last\">\n <div class=\"progress-step-info-container\">\n <div class=\"title\">\n <div class=\"title-text\">{{ step.title }}</div>\n @if (step.completed) {\n <div class=\"title-completed-icon\">\n <ads-icon name=\"check_circle\" size=\"xxs\" theme=\"primary\" />\n </div>\n }\n @if (step?.date) {\n <div class=\"date\">{{ step?.date }}</div>\n }\n </div>\n </div>\n </div>\n </div>\n }\n</div>\n", styles: [":host{box-sizing:border-box}.progress-stepper{display:grid;max-width:100%;-webkit-user-select:none;user-select:none;transition:margin .3s ease-in-out}.progress-stepper-step{display:flex;flex-direction:column;flex:1}.progress-step-info{display:flex;flex-direction:column;align-items:center;padding:8px}.progress-step-info.first{align-items:flex-start}.progress-step-info.last{align-items:flex-end}.progress-stepper-step:last-of-type .title,.progress-stepper-step:last-of-type .date{text-align:right}.title{color:var(--color-medium);font-size:13px;font-weight:500;display:flex;height:24px;align-items:center}.title-text{margin-right:6px;line-height:24px;white-space:nowrap}.title-completed-icon{line-height:24px;display:flex;align-items:center}.date{color:var(--color-black);font-size:12px;line-height:14px;white-space:nowrap}.progress-bar{width:100%;background-color:var(--color-medium-50);height:12px}.progress-bar.first,.progress-bar.first .progress-bar-highlight{border-top-left-radius:12px;border-bottom-left-radius:12px}.progress-bar.last,.progress-bar.last .progress-bar-highlight{border-top-right-radius:12px;border-bottom-right-radius:12px}.progress-bar-highlight{height:12px;width:100%}.progress-bar-highlight.completed{background-color:var(--color-success)}.progress-bar-highlight.roundedLeft{border-top-left-radius:12px;border-bottom-left-radius:12px}.progress-bar-highlight.roundedRight{border-top-right-radius:12px;border-bottom-right-radius:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i3$4.AdsGestureDirective, selector: "[adsGesture]", outputs: ["gesturedown", "gestureleft", "gestureright", "gestureup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7955
7955
|
}
|
|
7956
7956
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AdsProgressStepperComponent, decorators: [{
|
|
7957
7957
|
type: Component,
|
|
7958
|
-
args: [{ selector: '
|
|
7958
|
+
args: [{ selector: 'ads-progress-stepper', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n #stepper\n adsGesture\n class=\"progress-stepper\"\n [ngStyle]=\"styles?.step\"\n [draggable]=\"false\"\n (gestureleft)=\"onSwipeLeft()\"\n (gestureright)=\"onSwipeRight()\"\n>\n @for (step of steps; track $index; let first = $first; let last = $last) {\n <div\n #stepElements\n class=\"progress-stepper-step\"\n [draggable]=\"false\"\n >\n <div class=\"progress-bar\" [class.first]=\"first\" [class.last]=\"last\">\n <div\n class=\"progress-bar-highlight\"\n [class.completed]=\"step.completed\"\n [class.roundedLeft]=\"first || (!steps[$index - 1].completed && step.completed)\"\n [class.roundedRight]=\"\n last || (!steps[$index + 1].completed && step.completed) || (first && !steps[$index + 1].completed)\n \"\n ></div>\n </div>\n <div class=\"progress-step-info\" [class.first]=\"first\" [class.last]=\"last\">\n <div class=\"progress-step-info-container\">\n <div class=\"title\">\n <div class=\"title-text\">{{ step.title }}</div>\n @if (step.completed) {\n <div class=\"title-completed-icon\">\n <ads-icon name=\"check_circle\" size=\"xxs\" theme=\"primary\" />\n </div>\n }\n @if (step?.date) {\n <div class=\"date\">{{ step?.date }}</div>\n }\n </div>\n </div>\n </div>\n </div>\n }\n</div>\n", styles: [":host{box-sizing:border-box}.progress-stepper{display:grid;max-width:100%;-webkit-user-select:none;user-select:none;transition:margin .3s ease-in-out}.progress-stepper-step{display:flex;flex-direction:column;flex:1}.progress-step-info{display:flex;flex-direction:column;align-items:center;padding:8px}.progress-step-info.first{align-items:flex-start}.progress-step-info.last{align-items:flex-end}.progress-stepper-step:last-of-type .title,.progress-stepper-step:last-of-type .date{text-align:right}.title{color:var(--color-medium);font-size:13px;font-weight:500;display:flex;height:24px;align-items:center}.title-text{margin-right:6px;line-height:24px;white-space:nowrap}.title-completed-icon{line-height:24px;display:flex;align-items:center}.date{color:var(--color-black);font-size:12px;line-height:14px;white-space:nowrap}.progress-bar{width:100%;background-color:var(--color-medium-50);height:12px}.progress-bar.first,.progress-bar.first .progress-bar-highlight{border-top-left-radius:12px;border-bottom-left-radius:12px}.progress-bar.last,.progress-bar.last .progress-bar-highlight{border-top-right-radius:12px;border-bottom-right-radius:12px}.progress-bar-highlight{height:12px;width:100%}.progress-bar-highlight.completed{background-color:var(--color-success)}.progress-bar-highlight.roundedLeft{border-top-left-radius:12px;border-bottom-left-radius:12px}.progress-bar-highlight.roundedRight{border-top-right-radius:12px;border-bottom-right-radius:12px}\n"] }]
|
|
7959
7959
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1.AdsIconRegistry }, { type: Window }], propDecorators: { stepper: [{
|
|
7960
7960
|
type: ViewChild,
|
|
7961
7961
|
args: ['stepper']
|