@educarehq/solaris-components 0.4.0 → 0.4.1
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.
|
@@ -580,6 +580,7 @@ class SolarisStepper {
|
|
|
580
580
|
allowBackNavigation = true;
|
|
581
581
|
allowFutureNavigation = false;
|
|
582
582
|
allowSkip = false;
|
|
583
|
+
renderPanels = true;
|
|
583
584
|
showStateBadges = false;
|
|
584
585
|
activeIndexChange = new EventEmitter();
|
|
585
586
|
nextChange = new EventEmitter();
|
|
@@ -902,7 +903,7 @@ class SolarisStepper {
|
|
|
902
903
|
button?.focus();
|
|
903
904
|
}
|
|
904
905
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisStepper, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
905
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisStepper, isStandalone: true, selector: "solaris-stepper", inputs: { orientation: "orientation", appearance: "appearance", linear: "linear", interactive: "interactive", activeIndex: "activeIndex", defaultActiveIndex: "defaultActiveIndex", allowBackNavigation: "allowBackNavigation", allowFutureNavigation: "allowFutureNavigation", allowSkip: "allowSkip", showStateBadges: "showStateBadges" }, outputs: { activeIndexChange: "activeIndexChange", nextChange: "next", previousChange: "previous", stepChange: "stepChange" }, queries: [{ propertyName: "itemsQuery", predicate: SolarisStepperItem }], viewQueries: [{ propertyName: "stepButtons", predicate: ["stepButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"solaris-stepper\" [ngClass]=\"[\r\n 'orientation-' + orientation,\r\n 'appearance-' + appearance\r\n ]\">\r\n\r\n <div class=\"solaris-stepper__rail\" role=\"tablist\" [attr.aria-orientation]=\"orientation\">\r\n\r\n @for (item of items; track trackByIndex($index); let i = $index; let last = $last) {\r\n <div class=\"solaris-stepper__node\">\r\n <button #stepButton type=\"button\" role=\"tab\" class=\"solaris-stepper__step\"\r\n [id]=\"item.headerId\" [attr.aria-controls]=\"item.panelId\" [attr.aria-selected]=\"isCurrent(i)\"\r\n [attr.aria-current]=\"isCurrent(i) ? 'step' : null\"\r\n [attr.aria-disabled]=\"item.status === 'disabled' || item.status === 'locked'\"\r\n [attr.tabindex]=\"isCurrent(i) ? 0 : -1\" [ngClass]=\"getStepClasses(item, i)\"\r\n (click)=\"onStepHeaderClick(i)\" (keydown)=\"onStepKeydown($event, i)\">\r\n\r\n <span class=\"solaris-stepper__marker\" [ngClass]=\"getStepClasses(item, i)\">\r\n @if (getMarkerIcon(item, i)) {\r\n <i class=\"ph\" [ngClass]=\"getMarkerIcon(item, i)\" aria-hidden=\"true\"></i>\r\n }\r\n\r\n @if (getMarkerText(item, i)) {\r\n <span>{{ getMarkerText(item, i) }}</span>\r\n }\r\n </span>\r\n\r\n <span class=\"solaris-stepper__meta\">\r\n <span class=\"solaris-stepper__label\">\r\n @if (item.labelKey) {\r\n {{ item.labelKey | translate }}\r\n } @else if (item.label) {\r\n {{ item.label }}\r\n } @else {\r\n {{ 'ui.solaris.stepper.step' | translate }} {{ i + 1 }}\r\n }\r\n </span>\r\n\r\n <span class=\"solaris-stepper__title\">\r\n @if (item.titleKey) {\r\n {{ item.titleKey | translate }}\r\n } @else {\r\n {{ item.title }}\r\n }\r\n </span>\r\n\r\n @if (item.descriptionKey || item.description) {\r\n <span class=\"solaris-stepper__description\">\r\n @if (item.descriptionKey) {\r\n {{ item.descriptionKey | translate }}\r\n } @else {\r\n {{ item.description }}\r\n }\r\n </span>\r\n }\r\n\r\n @if (item.optional) {\r\n <span class=\"solaris-stepper__optional\">\r\n {{ 'ui.solaris.stepper.optional' | translate }}\r\n </span>\r\n }\r\n </span>\r\n\r\n @if (hasBadge(item, i)) {\r\n <solaris-badge class=\"solaris-stepper__badge\" [pill]=\"item.badgePill\" [size]=\"item.badgeSize\"\r\n [variant]=\"getResolvedBadgeVariant(item)\" [color]=\"getResolvedBadgeColor(item, i)\" aria-hidden=\"true\">\r\n\r\n @if (item.badgeTextKey) {\r\n {{ item.badgeTextKey | translate }}\r\n } @else if (item.badgeText) {\r\n {{ item.badgeText }}\r\n } @else {\r\n {{ getAutoBadgeTranslationKey(item, i) | translate }}\r\n }\r\n </solaris-badge>\r\n }\r\n </button>\r\n\r\n @if (!last) {\r\n <span class=\"solaris-stepper__connector\" [ngClass]=\"getConnectorClasses(i)\" aria-hidden=\"true\"></span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"solaris-stepper__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;min-width:0}.solaris-stepper{display:grid;gap:var(--solaris-space-6);min-width:0}.solaris-stepper.orientation-horizontal{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical{grid-template-columns:minmax(16rem,20rem) minmax(0,1fr);align-items:start}.solaris-stepper__rail{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper__rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-2);padding-bottom:var(--solaris-space-1)}.solaris-stepper.orientation-vertical .solaris-stepper__rail{display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-stepper__node{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper__node{flex:1 1 0;display:flex;align-items:center;min-width:11rem}.solaris-stepper.orientation-vertical .solaris-stepper__node{display:flex;flex-direction:column;align-items:stretch}.solaris-stepper__step{width:100%;min-width:0;display:flex;align-items:flex-start;gap:var(--solaris-space-2);padding:var(--solaris-space-2) var(--solaris-space-3);border:1px solid transparent;background:transparent;border-radius:var(--solaris-radius-md);color:var(--solaris-color-text);text-align:left;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}.solaris-stepper__step.is-clickable{cursor:pointer}.solaris-stepper__step.is-clickable:hover{background:color-mix(in srgb,var(--solaris-color-surface-2) 78%,transparent)}.solaris-stepper__step.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 8%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-primary) 35%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-disabled,.solaris-stepper__step.is-locked{opacity:.65;cursor:not-allowed}.solaris-stepper__step:focus-visible{outline:none;box-shadow:0 0 0 .2rem color-mix(in srgb,var(--solaris-color-primary) 28%,transparent),var(--solaris-shadow-xs)}.solaris-stepper__marker{width:2rem;height:2rem;flex:0 0 2rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--solaris-radius-full);border:1px solid var(--solaris-color-border);background:var(--solaris-color-surface);color:var(--solaris-color-text);font-size:var(--solaris-fs-12);font-weight:700;line-height:1;box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__marker.is-current{background:var(--solaris-color-primary);border-color:var(--solaris-color-primary);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-completed{background:var(--solaris-color-success);border-color:var(--solaris-color-success);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-warning{border-color:var(--solaris-color-warning);color:var(--solaris-color-warning)}.solaris-stepper__marker.is-error{border-color:var(--solaris-color-error);color:var(--solaris-color-error)}.solaris-stepper__marker.is-locked,.solaris-stepper__marker.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper__meta{display:grid;gap:var(--solaris-space-1);min-width:0;flex:1 1 auto}.solaris-stepper__label{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight);letter-spacing:var(--solaris-ls-lg);text-transform:uppercase;font-weight:700}.solaris-stepper__title{color:var(--solaris-color-text);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);font-weight:700}.solaris-stepper__description{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed)}.solaris-stepper__optional{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight)}.solaris-stepper__badge{align-self:flex-start}.solaris-stepper__connector{background:var(--solaris-color-border);opacity:.8}.solaris-stepper.orientation-horizontal .solaris-stepper__connector{height:1px;flex:1 1 auto;min-width:var(--solaris-space-10)}.solaris-stepper.orientation-vertical .solaris-stepper__connector{width:1px;min-height:var(--solaris-space-8);margin-left:calc(var(--solaris-space-3) + 1rem)}.solaris-stepper__connector.is-completed,.solaris-stepper__connector.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 75%,var(--solaris-color-success))}.solaris-stepper__step.is-current.is-warning,.solaris-stepper__step.is-completed.is-warning{background:color-mix(in srgb,var(--solaris-color-warning) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-warning) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-current.is-error,.solaris-stepper__step.is-completed.is-error{background:color-mix(in srgb,var(--solaris-color-error) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-error) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-current.is-locked,.solaris-stepper__step.is-completed.is-locked,.solaris-stepper__step.is-current.is-disabled,.solaris-stepper__step.is-completed.is-disabled{background:color-mix(in srgb,var(--solaris-color-surface-2) 65%,transparent);border-color:var(--solaris-color-border);box-shadow:none}.solaris-stepper__marker.is-current.is-warning,.solaris-stepper__marker.is-completed.is-warning{background:var(--solaris-color-warning);border-color:var(--solaris-color-warning);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-current.is-error,.solaris-stepper__marker.is-completed.is-error{background:var(--solaris-color-error);border-color:var(--solaris-color-error);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-current.is-locked,.solaris-stepper__marker.is-completed.is-locked,.solaris-stepper__marker.is-current.is-disabled,.solaris-stepper__marker.is-completed.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper__content{min-width:0}.solaris-stepper.appearance-compact{gap:var(--solaris-space-4)}.solaris-stepper.appearance-compact .solaris-stepper__rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-4);padding-bottom:var(--solaris-space-1)}.solaris-stepper.appearance-compact .solaris-stepper__node{flex:1 0 auto;min-width:8rem}.solaris-stepper.appearance-compact .solaris-stepper__step{position:relative;padding:0 0 var(--solaris-space-3);gap:var(--solaris-space-1);background:transparent;border:0;border-radius:0;box-shadow:none;align-items:center}.solaris-stepper.appearance-compact .solaris-stepper__step.is-clickable:hover{background:transparent}.solaris-stepper.appearance-compact .solaris-stepper__step:after{content:\"\";position:absolute;left:0;right:0;bottom:-.25rem;height:.75rem;border-radius:var(--solaris-radius-full);background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed:after{background:var(--solaris-color-primary)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning:after{background:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error:after{background:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending:after{background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper__marker{width:auto;height:auto;flex:0 0 auto;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);font-weight:700;line-height:var(--solaris-lh-tight)}.solaris-stepper.appearance-compact .solaris-stepper__meta{display:block}.solaris-stepper.appearance-compact .solaris-stepper__label,.solaris-stepper.appearance-compact .solaris-stepper__description,.solaris-stepper.appearance-compact .solaris-stepper__optional,.solaris-stepper.appearance-compact .solaris-stepper__badge{display:none}.solaris-stepper.appearance-compact .solaris-stepper__title{font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-tight);font-weight:600;color:var(--solaris-color-text-muted);white-space:nowrap}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed .solaris-stepper__title{color:color-mix(in srgb,var(--solaris-color-primary) 65%,white)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning .solaris-stepper__title{color:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error .solaris-stepper__title{color:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending .solaris-stepper__title{color:var(--solaris-color-text-muted)}.solaris-stepper.appearance-compact .solaris-stepper__connector{display:none}@media(max-width:768px){.solaris-stepper.orientation-vertical{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical .solaris-stepper__rail{overflow-x:auto;flex-direction:row;gap:var(--solaris-space-4)}.solaris-stepper.orientation-vertical .solaris-stepper__node,.solaris-stepper.orientation-horizontal .solaris-stepper__node{min-width:10rem}.solaris-stepper.orientation-horizontal .solaris-stepper__connector,.solaris-stepper.orientation-vertical .solaris-stepper__connector{min-width:var(--solaris-space-8);min-height:1px;height:1px;width:auto;margin-left:0;flex:1 1 auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SolarisBadge, selector: "solaris-badge", inputs: ["pill", "customTextColor", "interactive", "size", "variant", "color", "aria-hidden"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
906
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisStepper, isStandalone: true, selector: "solaris-stepper", inputs: { orientation: "orientation", appearance: "appearance", linear: "linear", interactive: "interactive", activeIndex: "activeIndex", defaultActiveIndex: "defaultActiveIndex", allowBackNavigation: "allowBackNavigation", allowFutureNavigation: "allowFutureNavigation", allowSkip: "allowSkip", renderPanels: "renderPanels", showStateBadges: "showStateBadges" }, outputs: { activeIndexChange: "activeIndexChange", nextChange: "next", previousChange: "previous", stepChange: "stepChange" }, queries: [{ propertyName: "itemsQuery", predicate: SolarisStepperItem }], viewQueries: [{ propertyName: "stepButtons", predicate: ["stepButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"solaris-stepper\" [ngClass]=\"[\r\n 'orientation-' + orientation,\r\n 'appearance-' + appearance\r\n ]\">\r\n\r\n <div class=\"solaris-stepper__rail\" role=\"tablist\" [attr.aria-orientation]=\"orientation\">\r\n\r\n @for (item of items; track trackByIndex($index); let i = $index; let last = $last) {\r\n <div class=\"solaris-stepper__node\">\r\n <button #stepButton type=\"button\" role=\"tab\" class=\"solaris-stepper__step\"\r\n [id]=\"item.headerId\" [attr.aria-controls]=\"item.panelId\" [attr.aria-selected]=\"isCurrent(i)\"\r\n [attr.aria-current]=\"isCurrent(i) ? 'step' : null\"\r\n [attr.aria-disabled]=\"item.status === 'disabled' || item.status === 'locked'\"\r\n [attr.tabindex]=\"isCurrent(i) ? 0 : -1\" [ngClass]=\"getStepClasses(item, i)\"\r\n (click)=\"onStepHeaderClick(i)\" (keydown)=\"onStepKeydown($event, i)\">\r\n\r\n <span class=\"solaris-stepper__marker\" [ngClass]=\"getStepClasses(item, i)\">\r\n @if (getMarkerIcon(item, i)) {\r\n <i class=\"ph\" [ngClass]=\"getMarkerIcon(item, i)\" aria-hidden=\"true\"></i>\r\n }\r\n\r\n @if (getMarkerText(item, i)) {\r\n <span>{{ getMarkerText(item, i) }}</span>\r\n }\r\n </span>\r\n\r\n <span class=\"solaris-stepper__meta\">\r\n <span class=\"solaris-stepper__label\">\r\n @if (item.labelKey) {\r\n {{ item.labelKey | translate }}\r\n } @else if (item.label) {\r\n {{ item.label }}\r\n } @else {\r\n {{ 'ui.solaris.stepper.step' | translate }} {{ i + 1 }}\r\n }\r\n </span>\r\n\r\n <span class=\"solaris-stepper__title\">\r\n @if (item.titleKey) {\r\n {{ item.titleKey | translate }}\r\n } @else {\r\n {{ item.title }}\r\n }\r\n </span>\r\n\r\n @if (item.descriptionKey || item.description) {\r\n <span class=\"solaris-stepper__description\">\r\n @if (item.descriptionKey) {\r\n {{ item.descriptionKey | translate }}\r\n } @else {\r\n {{ item.description }}\r\n }\r\n </span>\r\n }\r\n\r\n @if (item.optional) {\r\n <span class=\"solaris-stepper__optional\">\r\n {{ 'ui.solaris.stepper.optional' | translate }}\r\n </span>\r\n }\r\n </span>\r\n\r\n @if (hasBadge(item, i)) {\r\n <solaris-badge class=\"solaris-stepper__badge\" [pill]=\"item.badgePill\" [size]=\"item.badgeSize\"\r\n [variant]=\"getResolvedBadgeVariant(item)\" [color]=\"getResolvedBadgeColor(item, i)\" aria-hidden=\"true\">\r\n\r\n @if (item.badgeTextKey) {\r\n {{ item.badgeTextKey | translate }}\r\n } @else if (item.badgeText) {\r\n {{ item.badgeText }}\r\n } @else {\r\n {{ getAutoBadgeTranslationKey(item, i) | translate }}\r\n }\r\n </solaris-badge>\r\n }\r\n </button>\r\n\r\n @if (!last) {\r\n <span class=\"solaris-stepper__connector\" [ngClass]=\"getConnectorClasses(i)\" aria-hidden=\"true\"></span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (renderPanels) {\r\n <div class=\"solaris-stepper__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block;min-width:0}.solaris-stepper{display:grid;gap:var(--solaris-space-6);min-width:0}.solaris-stepper.orientation-horizontal{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical{grid-template-columns:minmax(16rem,20rem) minmax(0,1fr);align-items:start}.solaris-stepper__rail{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper__rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-2);padding-bottom:var(--solaris-space-1)}.solaris-stepper.orientation-vertical .solaris-stepper__rail{display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-stepper__node{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper__node{flex:1 1 0;display:flex;align-items:center;min-width:11rem}.solaris-stepper.orientation-vertical .solaris-stepper__node{display:flex;flex-direction:column;align-items:stretch}.solaris-stepper__step{width:100%;min-width:0;display:flex;align-items:flex-start;gap:var(--solaris-space-2);padding:var(--solaris-space-2) var(--solaris-space-3);border:1px solid transparent;background:transparent;border-radius:var(--solaris-radius-md);color:var(--solaris-color-text);text-align:left;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}.solaris-stepper__step.is-clickable{cursor:pointer}.solaris-stepper__step.is-clickable:hover{background:color-mix(in srgb,var(--solaris-color-surface-2) 78%,transparent)}.solaris-stepper__step.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 8%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-primary) 35%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-disabled,.solaris-stepper__step.is-locked{opacity:.65;cursor:not-allowed}.solaris-stepper__step:focus-visible{outline:none;box-shadow:0 0 0 .2rem color-mix(in srgb,var(--solaris-color-primary) 28%,transparent),var(--solaris-shadow-xs)}.solaris-stepper__marker{width:2rem;height:2rem;flex:0 0 2rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--solaris-radius-full);border:1px solid var(--solaris-color-border);background:var(--solaris-color-surface);color:var(--solaris-color-text);font-size:var(--solaris-fs-12);font-weight:700;line-height:1;box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__marker.is-current{background:var(--solaris-color-primary);border-color:var(--solaris-color-primary);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-completed{background:var(--solaris-color-success);border-color:var(--solaris-color-success);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-warning{border-color:var(--solaris-color-warning);color:var(--solaris-color-warning)}.solaris-stepper__marker.is-error{border-color:var(--solaris-color-error);color:var(--solaris-color-error)}.solaris-stepper__marker.is-locked,.solaris-stepper__marker.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper__meta{display:grid;gap:var(--solaris-space-1);min-width:0;flex:1 1 auto}.solaris-stepper__label{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight);letter-spacing:var(--solaris-ls-lg);text-transform:uppercase;font-weight:700}.solaris-stepper__title{color:var(--solaris-color-text);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);font-weight:700}.solaris-stepper__description{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed)}.solaris-stepper__optional{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight)}.solaris-stepper__badge{align-self:flex-start}.solaris-stepper__connector{background:var(--solaris-color-border);opacity:.8}.solaris-stepper.orientation-horizontal .solaris-stepper__connector{height:1px;flex:1 1 auto;min-width:var(--solaris-space-10)}.solaris-stepper.orientation-vertical .solaris-stepper__connector{width:1px;min-height:var(--solaris-space-8);margin-left:calc(var(--solaris-space-3) + 1rem)}.solaris-stepper__connector.is-completed,.solaris-stepper__connector.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 75%,var(--solaris-color-success))}.solaris-stepper__step.is-current.is-warning,.solaris-stepper__step.is-completed.is-warning{background:color-mix(in srgb,var(--solaris-color-warning) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-warning) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-current.is-error,.solaris-stepper__step.is-completed.is-error{background:color-mix(in srgb,var(--solaris-color-error) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-error) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-current.is-locked,.solaris-stepper__step.is-completed.is-locked,.solaris-stepper__step.is-current.is-disabled,.solaris-stepper__step.is-completed.is-disabled{background:color-mix(in srgb,var(--solaris-color-surface-2) 65%,transparent);border-color:var(--solaris-color-border);box-shadow:none}.solaris-stepper__marker.is-current.is-warning,.solaris-stepper__marker.is-completed.is-warning{background:var(--solaris-color-warning);border-color:var(--solaris-color-warning);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-current.is-error,.solaris-stepper__marker.is-completed.is-error{background:var(--solaris-color-error);border-color:var(--solaris-color-error);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-current.is-locked,.solaris-stepper__marker.is-completed.is-locked,.solaris-stepper__marker.is-current.is-disabled,.solaris-stepper__marker.is-completed.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper__content{min-width:0}.solaris-stepper.appearance-compact{gap:var(--solaris-space-4)}.solaris-stepper.appearance-compact .solaris-stepper__rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-4);padding-bottom:var(--solaris-space-1)}.solaris-stepper.appearance-compact .solaris-stepper__node{flex:1 0 auto;min-width:8rem}.solaris-stepper.appearance-compact .solaris-stepper__step{position:relative;padding:0 0 var(--solaris-space-3);gap:var(--solaris-space-1);background:transparent;border:0;border-radius:0;box-shadow:none;align-items:center}.solaris-stepper.appearance-compact .solaris-stepper__step.is-clickable:hover{background:transparent}.solaris-stepper.appearance-compact .solaris-stepper__step:after{content:\"\";position:absolute;left:0;right:0;bottom:-.25rem;height:.75rem;border-radius:var(--solaris-radius-full);background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed:after{background:var(--solaris-color-primary)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning:after{background:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error:after{background:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending:after{background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper__marker{width:auto;height:auto;flex:0 0 auto;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);font-weight:700;line-height:var(--solaris-lh-tight)}.solaris-stepper.appearance-compact .solaris-stepper__meta{display:block}.solaris-stepper.appearance-compact .solaris-stepper__label,.solaris-stepper.appearance-compact .solaris-stepper__description,.solaris-stepper.appearance-compact .solaris-stepper__optional,.solaris-stepper.appearance-compact .solaris-stepper__badge{display:none}.solaris-stepper.appearance-compact .solaris-stepper__title{font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-tight);font-weight:600;color:var(--solaris-color-text-muted);white-space:nowrap}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed .solaris-stepper__title{color:color-mix(in srgb,var(--solaris-color-primary) 65%,white)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning .solaris-stepper__title{color:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error .solaris-stepper__title{color:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending .solaris-stepper__title{color:var(--solaris-color-text-muted)}.solaris-stepper.appearance-compact .solaris-stepper__connector{display:none}@media(max-width:768px){.solaris-stepper.orientation-vertical{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical .solaris-stepper__rail{overflow-x:auto;flex-direction:row;gap:var(--solaris-space-4)}.solaris-stepper.orientation-vertical .solaris-stepper__node,.solaris-stepper.orientation-horizontal .solaris-stepper__node{min-width:10rem}.solaris-stepper.orientation-horizontal .solaris-stepper__connector,.solaris-stepper.orientation-vertical .solaris-stepper__connector{min-width:var(--solaris-space-8);min-height:1px;height:1px;width:auto;margin-left:0;flex:1 1 auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SolarisBadge, selector: "solaris-badge", inputs: ["pill", "customTextColor", "interactive", "size", "variant", "color", "aria-hidden"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
906
907
|
}
|
|
907
908
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisStepper, decorators: [{
|
|
908
909
|
type: Component,
|
|
@@ -910,7 +911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
910
911
|
CommonModule,
|
|
911
912
|
SolarisTranslationPipe,
|
|
912
913
|
SolarisBadge,
|
|
913
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-stepper\" [ngClass]=\"[\r\n 'orientation-' + orientation,\r\n 'appearance-' + appearance\r\n ]\">\r\n\r\n <div class=\"solaris-stepper__rail\" role=\"tablist\" [attr.aria-orientation]=\"orientation\">\r\n\r\n @for (item of items; track trackByIndex($index); let i = $index; let last = $last) {\r\n <div class=\"solaris-stepper__node\">\r\n <button #stepButton type=\"button\" role=\"tab\" class=\"solaris-stepper__step\"\r\n [id]=\"item.headerId\" [attr.aria-controls]=\"item.panelId\" [attr.aria-selected]=\"isCurrent(i)\"\r\n [attr.aria-current]=\"isCurrent(i) ? 'step' : null\"\r\n [attr.aria-disabled]=\"item.status === 'disabled' || item.status === 'locked'\"\r\n [attr.tabindex]=\"isCurrent(i) ? 0 : -1\" [ngClass]=\"getStepClasses(item, i)\"\r\n (click)=\"onStepHeaderClick(i)\" (keydown)=\"onStepKeydown($event, i)\">\r\n\r\n <span class=\"solaris-stepper__marker\" [ngClass]=\"getStepClasses(item, i)\">\r\n @if (getMarkerIcon(item, i)) {\r\n <i class=\"ph\" [ngClass]=\"getMarkerIcon(item, i)\" aria-hidden=\"true\"></i>\r\n }\r\n\r\n @if (getMarkerText(item, i)) {\r\n <span>{{ getMarkerText(item, i) }}</span>\r\n }\r\n </span>\r\n\r\n <span class=\"solaris-stepper__meta\">\r\n <span class=\"solaris-stepper__label\">\r\n @if (item.labelKey) {\r\n {{ item.labelKey | translate }}\r\n } @else if (item.label) {\r\n {{ item.label }}\r\n } @else {\r\n {{ 'ui.solaris.stepper.step' | translate }} {{ i + 1 }}\r\n }\r\n </span>\r\n\r\n <span class=\"solaris-stepper__title\">\r\n @if (item.titleKey) {\r\n {{ item.titleKey | translate }}\r\n } @else {\r\n {{ item.title }}\r\n }\r\n </span>\r\n\r\n @if (item.descriptionKey || item.description) {\r\n <span class=\"solaris-stepper__description\">\r\n @if (item.descriptionKey) {\r\n {{ item.descriptionKey | translate }}\r\n } @else {\r\n {{ item.description }}\r\n }\r\n </span>\r\n }\r\n\r\n @if (item.optional) {\r\n <span class=\"solaris-stepper__optional\">\r\n {{ 'ui.solaris.stepper.optional' | translate }}\r\n </span>\r\n }\r\n </span>\r\n\r\n @if (hasBadge(item, i)) {\r\n <solaris-badge class=\"solaris-stepper__badge\" [pill]=\"item.badgePill\" [size]=\"item.badgeSize\"\r\n [variant]=\"getResolvedBadgeVariant(item)\" [color]=\"getResolvedBadgeColor(item, i)\" aria-hidden=\"true\">\r\n\r\n @if (item.badgeTextKey) {\r\n {{ item.badgeTextKey | translate }}\r\n } @else if (item.badgeText) {\r\n {{ item.badgeText }}\r\n } @else {\r\n {{ getAutoBadgeTranslationKey(item, i) | translate }}\r\n }\r\n </solaris-badge>\r\n }\r\n </button>\r\n\r\n @if (!last) {\r\n <span class=\"solaris-stepper__connector\" [ngClass]=\"getConnectorClasses(i)\" aria-hidden=\"true\"></span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"solaris-stepper__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;min-width:0}.solaris-stepper{display:grid;gap:var(--solaris-space-6);min-width:0}.solaris-stepper.orientation-horizontal{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical{grid-template-columns:minmax(16rem,20rem) minmax(0,1fr);align-items:start}.solaris-stepper__rail{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper__rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-2);padding-bottom:var(--solaris-space-1)}.solaris-stepper.orientation-vertical .solaris-stepper__rail{display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-stepper__node{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper__node{flex:1 1 0;display:flex;align-items:center;min-width:11rem}.solaris-stepper.orientation-vertical .solaris-stepper__node{display:flex;flex-direction:column;align-items:stretch}.solaris-stepper__step{width:100%;min-width:0;display:flex;align-items:flex-start;gap:var(--solaris-space-2);padding:var(--solaris-space-2) var(--solaris-space-3);border:1px solid transparent;background:transparent;border-radius:var(--solaris-radius-md);color:var(--solaris-color-text);text-align:left;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}.solaris-stepper__step.is-clickable{cursor:pointer}.solaris-stepper__step.is-clickable:hover{background:color-mix(in srgb,var(--solaris-color-surface-2) 78%,transparent)}.solaris-stepper__step.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 8%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-primary) 35%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-disabled,.solaris-stepper__step.is-locked{opacity:.65;cursor:not-allowed}.solaris-stepper__step:focus-visible{outline:none;box-shadow:0 0 0 .2rem color-mix(in srgb,var(--solaris-color-primary) 28%,transparent),var(--solaris-shadow-xs)}.solaris-stepper__marker{width:2rem;height:2rem;flex:0 0 2rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--solaris-radius-full);border:1px solid var(--solaris-color-border);background:var(--solaris-color-surface);color:var(--solaris-color-text);font-size:var(--solaris-fs-12);font-weight:700;line-height:1;box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__marker.is-current{background:var(--solaris-color-primary);border-color:var(--solaris-color-primary);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-completed{background:var(--solaris-color-success);border-color:var(--solaris-color-success);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-warning{border-color:var(--solaris-color-warning);color:var(--solaris-color-warning)}.solaris-stepper__marker.is-error{border-color:var(--solaris-color-error);color:var(--solaris-color-error)}.solaris-stepper__marker.is-locked,.solaris-stepper__marker.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper__meta{display:grid;gap:var(--solaris-space-1);min-width:0;flex:1 1 auto}.solaris-stepper__label{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight);letter-spacing:var(--solaris-ls-lg);text-transform:uppercase;font-weight:700}.solaris-stepper__title{color:var(--solaris-color-text);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);font-weight:700}.solaris-stepper__description{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed)}.solaris-stepper__optional{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight)}.solaris-stepper__badge{align-self:flex-start}.solaris-stepper__connector{background:var(--solaris-color-border);opacity:.8}.solaris-stepper.orientation-horizontal .solaris-stepper__connector{height:1px;flex:1 1 auto;min-width:var(--solaris-space-10)}.solaris-stepper.orientation-vertical .solaris-stepper__connector{width:1px;min-height:var(--solaris-space-8);margin-left:calc(var(--solaris-space-3) + 1rem)}.solaris-stepper__connector.is-completed,.solaris-stepper__connector.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 75%,var(--solaris-color-success))}.solaris-stepper__step.is-current.is-warning,.solaris-stepper__step.is-completed.is-warning{background:color-mix(in srgb,var(--solaris-color-warning) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-warning) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-current.is-error,.solaris-stepper__step.is-completed.is-error{background:color-mix(in srgb,var(--solaris-color-error) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-error) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-current.is-locked,.solaris-stepper__step.is-completed.is-locked,.solaris-stepper__step.is-current.is-disabled,.solaris-stepper__step.is-completed.is-disabled{background:color-mix(in srgb,var(--solaris-color-surface-2) 65%,transparent);border-color:var(--solaris-color-border);box-shadow:none}.solaris-stepper__marker.is-current.is-warning,.solaris-stepper__marker.is-completed.is-warning{background:var(--solaris-color-warning);border-color:var(--solaris-color-warning);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-current.is-error,.solaris-stepper__marker.is-completed.is-error{background:var(--solaris-color-error);border-color:var(--solaris-color-error);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-current.is-locked,.solaris-stepper__marker.is-completed.is-locked,.solaris-stepper__marker.is-current.is-disabled,.solaris-stepper__marker.is-completed.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper__content{min-width:0}.solaris-stepper.appearance-compact{gap:var(--solaris-space-4)}.solaris-stepper.appearance-compact .solaris-stepper__rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-4);padding-bottom:var(--solaris-space-1)}.solaris-stepper.appearance-compact .solaris-stepper__node{flex:1 0 auto;min-width:8rem}.solaris-stepper.appearance-compact .solaris-stepper__step{position:relative;padding:0 0 var(--solaris-space-3);gap:var(--solaris-space-1);background:transparent;border:0;border-radius:0;box-shadow:none;align-items:center}.solaris-stepper.appearance-compact .solaris-stepper__step.is-clickable:hover{background:transparent}.solaris-stepper.appearance-compact .solaris-stepper__step:after{content:\"\";position:absolute;left:0;right:0;bottom:-.25rem;height:.75rem;border-radius:var(--solaris-radius-full);background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed:after{background:var(--solaris-color-primary)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning:after{background:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error:after{background:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending:after{background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper__marker{width:auto;height:auto;flex:0 0 auto;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);font-weight:700;line-height:var(--solaris-lh-tight)}.solaris-stepper.appearance-compact .solaris-stepper__meta{display:block}.solaris-stepper.appearance-compact .solaris-stepper__label,.solaris-stepper.appearance-compact .solaris-stepper__description,.solaris-stepper.appearance-compact .solaris-stepper__optional,.solaris-stepper.appearance-compact .solaris-stepper__badge{display:none}.solaris-stepper.appearance-compact .solaris-stepper__title{font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-tight);font-weight:600;color:var(--solaris-color-text-muted);white-space:nowrap}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed .solaris-stepper__title{color:color-mix(in srgb,var(--solaris-color-primary) 65%,white)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning .solaris-stepper__title{color:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error .solaris-stepper__title{color:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending .solaris-stepper__title{color:var(--solaris-color-text-muted)}.solaris-stepper.appearance-compact .solaris-stepper__connector{display:none}@media(max-width:768px){.solaris-stepper.orientation-vertical{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical .solaris-stepper__rail{overflow-x:auto;flex-direction:row;gap:var(--solaris-space-4)}.solaris-stepper.orientation-vertical .solaris-stepper__node,.solaris-stepper.orientation-horizontal .solaris-stepper__node{min-width:10rem}.solaris-stepper.orientation-horizontal .solaris-stepper__connector,.solaris-stepper.orientation-vertical .solaris-stepper__connector{min-width:var(--solaris-space-8);min-height:1px;height:1px;width:auto;margin-left:0;flex:1 1 auto}}\n"] }]
|
|
914
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-stepper\" [ngClass]=\"[\r\n 'orientation-' + orientation,\r\n 'appearance-' + appearance\r\n ]\">\r\n\r\n <div class=\"solaris-stepper__rail\" role=\"tablist\" [attr.aria-orientation]=\"orientation\">\r\n\r\n @for (item of items; track trackByIndex($index); let i = $index; let last = $last) {\r\n <div class=\"solaris-stepper__node\">\r\n <button #stepButton type=\"button\" role=\"tab\" class=\"solaris-stepper__step\"\r\n [id]=\"item.headerId\" [attr.aria-controls]=\"item.panelId\" [attr.aria-selected]=\"isCurrent(i)\"\r\n [attr.aria-current]=\"isCurrent(i) ? 'step' : null\"\r\n [attr.aria-disabled]=\"item.status === 'disabled' || item.status === 'locked'\"\r\n [attr.tabindex]=\"isCurrent(i) ? 0 : -1\" [ngClass]=\"getStepClasses(item, i)\"\r\n (click)=\"onStepHeaderClick(i)\" (keydown)=\"onStepKeydown($event, i)\">\r\n\r\n <span class=\"solaris-stepper__marker\" [ngClass]=\"getStepClasses(item, i)\">\r\n @if (getMarkerIcon(item, i)) {\r\n <i class=\"ph\" [ngClass]=\"getMarkerIcon(item, i)\" aria-hidden=\"true\"></i>\r\n }\r\n\r\n @if (getMarkerText(item, i)) {\r\n <span>{{ getMarkerText(item, i) }}</span>\r\n }\r\n </span>\r\n\r\n <span class=\"solaris-stepper__meta\">\r\n <span class=\"solaris-stepper__label\">\r\n @if (item.labelKey) {\r\n {{ item.labelKey | translate }}\r\n } @else if (item.label) {\r\n {{ item.label }}\r\n } @else {\r\n {{ 'ui.solaris.stepper.step' | translate }} {{ i + 1 }}\r\n }\r\n </span>\r\n\r\n <span class=\"solaris-stepper__title\">\r\n @if (item.titleKey) {\r\n {{ item.titleKey | translate }}\r\n } @else {\r\n {{ item.title }}\r\n }\r\n </span>\r\n\r\n @if (item.descriptionKey || item.description) {\r\n <span class=\"solaris-stepper__description\">\r\n @if (item.descriptionKey) {\r\n {{ item.descriptionKey | translate }}\r\n } @else {\r\n {{ item.description }}\r\n }\r\n </span>\r\n }\r\n\r\n @if (item.optional) {\r\n <span class=\"solaris-stepper__optional\">\r\n {{ 'ui.solaris.stepper.optional' | translate }}\r\n </span>\r\n }\r\n </span>\r\n\r\n @if (hasBadge(item, i)) {\r\n <solaris-badge class=\"solaris-stepper__badge\" [pill]=\"item.badgePill\" [size]=\"item.badgeSize\"\r\n [variant]=\"getResolvedBadgeVariant(item)\" [color]=\"getResolvedBadgeColor(item, i)\" aria-hidden=\"true\">\r\n\r\n @if (item.badgeTextKey) {\r\n {{ item.badgeTextKey | translate }}\r\n } @else if (item.badgeText) {\r\n {{ item.badgeText }}\r\n } @else {\r\n {{ getAutoBadgeTranslationKey(item, i) | translate }}\r\n }\r\n </solaris-badge>\r\n }\r\n </button>\r\n\r\n @if (!last) {\r\n <span class=\"solaris-stepper__connector\" [ngClass]=\"getConnectorClasses(i)\" aria-hidden=\"true\"></span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (renderPanels) {\r\n <div class=\"solaris-stepper__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block;min-width:0}.solaris-stepper{display:grid;gap:var(--solaris-space-6);min-width:0}.solaris-stepper.orientation-horizontal{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical{grid-template-columns:minmax(16rem,20rem) minmax(0,1fr);align-items:start}.solaris-stepper__rail{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper__rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-2);padding-bottom:var(--solaris-space-1)}.solaris-stepper.orientation-vertical .solaris-stepper__rail{display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-stepper__node{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper__node{flex:1 1 0;display:flex;align-items:center;min-width:11rem}.solaris-stepper.orientation-vertical .solaris-stepper__node{display:flex;flex-direction:column;align-items:stretch}.solaris-stepper__step{width:100%;min-width:0;display:flex;align-items:flex-start;gap:var(--solaris-space-2);padding:var(--solaris-space-2) var(--solaris-space-3);border:1px solid transparent;background:transparent;border-radius:var(--solaris-radius-md);color:var(--solaris-color-text);text-align:left;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}.solaris-stepper__step.is-clickable{cursor:pointer}.solaris-stepper__step.is-clickable:hover{background:color-mix(in srgb,var(--solaris-color-surface-2) 78%,transparent)}.solaris-stepper__step.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 8%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-primary) 35%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-disabled,.solaris-stepper__step.is-locked{opacity:.65;cursor:not-allowed}.solaris-stepper__step:focus-visible{outline:none;box-shadow:0 0 0 .2rem color-mix(in srgb,var(--solaris-color-primary) 28%,transparent),var(--solaris-shadow-xs)}.solaris-stepper__marker{width:2rem;height:2rem;flex:0 0 2rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--solaris-radius-full);border:1px solid var(--solaris-color-border);background:var(--solaris-color-surface);color:var(--solaris-color-text);font-size:var(--solaris-fs-12);font-weight:700;line-height:1;box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__marker.is-current{background:var(--solaris-color-primary);border-color:var(--solaris-color-primary);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-completed{background:var(--solaris-color-success);border-color:var(--solaris-color-success);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-warning{border-color:var(--solaris-color-warning);color:var(--solaris-color-warning)}.solaris-stepper__marker.is-error{border-color:var(--solaris-color-error);color:var(--solaris-color-error)}.solaris-stepper__marker.is-locked,.solaris-stepper__marker.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper__meta{display:grid;gap:var(--solaris-space-1);min-width:0;flex:1 1 auto}.solaris-stepper__label{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight);letter-spacing:var(--solaris-ls-lg);text-transform:uppercase;font-weight:700}.solaris-stepper__title{color:var(--solaris-color-text);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);font-weight:700}.solaris-stepper__description{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed)}.solaris-stepper__optional{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight)}.solaris-stepper__badge{align-self:flex-start}.solaris-stepper__connector{background:var(--solaris-color-border);opacity:.8}.solaris-stepper.orientation-horizontal .solaris-stepper__connector{height:1px;flex:1 1 auto;min-width:var(--solaris-space-10)}.solaris-stepper.orientation-vertical .solaris-stepper__connector{width:1px;min-height:var(--solaris-space-8);margin-left:calc(var(--solaris-space-3) + 1rem)}.solaris-stepper__connector.is-completed,.solaris-stepper__connector.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 75%,var(--solaris-color-success))}.solaris-stepper__step.is-current.is-warning,.solaris-stepper__step.is-completed.is-warning{background:color-mix(in srgb,var(--solaris-color-warning) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-warning) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-current.is-error,.solaris-stepper__step.is-completed.is-error{background:color-mix(in srgb,var(--solaris-color-error) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-error) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-current.is-locked,.solaris-stepper__step.is-completed.is-locked,.solaris-stepper__step.is-current.is-disabled,.solaris-stepper__step.is-completed.is-disabled{background:color-mix(in srgb,var(--solaris-color-surface-2) 65%,transparent);border-color:var(--solaris-color-border);box-shadow:none}.solaris-stepper__marker.is-current.is-warning,.solaris-stepper__marker.is-completed.is-warning{background:var(--solaris-color-warning);border-color:var(--solaris-color-warning);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-current.is-error,.solaris-stepper__marker.is-completed.is-error{background:var(--solaris-color-error);border-color:var(--solaris-color-error);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-current.is-locked,.solaris-stepper__marker.is-completed.is-locked,.solaris-stepper__marker.is-current.is-disabled,.solaris-stepper__marker.is-completed.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper__content{min-width:0}.solaris-stepper.appearance-compact{gap:var(--solaris-space-4)}.solaris-stepper.appearance-compact .solaris-stepper__rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-4);padding-bottom:var(--solaris-space-1)}.solaris-stepper.appearance-compact .solaris-stepper__node{flex:1 0 auto;min-width:8rem}.solaris-stepper.appearance-compact .solaris-stepper__step{position:relative;padding:0 0 var(--solaris-space-3);gap:var(--solaris-space-1);background:transparent;border:0;border-radius:0;box-shadow:none;align-items:center}.solaris-stepper.appearance-compact .solaris-stepper__step.is-clickable:hover{background:transparent}.solaris-stepper.appearance-compact .solaris-stepper__step:after{content:\"\";position:absolute;left:0;right:0;bottom:-.25rem;height:.75rem;border-radius:var(--solaris-radius-full);background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed:after{background:var(--solaris-color-primary)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning:after{background:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error:after{background:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending:after{background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper__marker{width:auto;height:auto;flex:0 0 auto;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);font-weight:700;line-height:var(--solaris-lh-tight)}.solaris-stepper.appearance-compact .solaris-stepper__meta{display:block}.solaris-stepper.appearance-compact .solaris-stepper__label,.solaris-stepper.appearance-compact .solaris-stepper__description,.solaris-stepper.appearance-compact .solaris-stepper__optional,.solaris-stepper.appearance-compact .solaris-stepper__badge{display:none}.solaris-stepper.appearance-compact .solaris-stepper__title{font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-tight);font-weight:600;color:var(--solaris-color-text-muted);white-space:nowrap}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed .solaris-stepper__title{color:color-mix(in srgb,var(--solaris-color-primary) 65%,white)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning .solaris-stepper__title{color:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error .solaris-stepper__title{color:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending .solaris-stepper__title{color:var(--solaris-color-text-muted)}.solaris-stepper.appearance-compact .solaris-stepper__connector{display:none}@media(max-width:768px){.solaris-stepper.orientation-vertical{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical .solaris-stepper__rail{overflow-x:auto;flex-direction:row;gap:var(--solaris-space-4)}.solaris-stepper.orientation-vertical .solaris-stepper__node,.solaris-stepper.orientation-horizontal .solaris-stepper__node{min-width:10rem}.solaris-stepper.orientation-horizontal .solaris-stepper__connector,.solaris-stepper.orientation-vertical .solaris-stepper__connector{min-width:var(--solaris-space-8);min-height:1px;height:1px;width:auto;margin-left:0;flex:1 1 auto}}\n"] }]
|
|
914
915
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { orientation: [{
|
|
915
916
|
type: Input
|
|
916
917
|
}], appearance: [{
|
|
@@ -929,6 +930,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
929
930
|
type: Input
|
|
930
931
|
}], allowSkip: [{
|
|
931
932
|
type: Input
|
|
933
|
+
}], renderPanels: [{
|
|
934
|
+
type: Input
|
|
932
935
|
}], showStateBadges: [{
|
|
933
936
|
type: Input
|
|
934
937
|
}], activeIndexChange: [{
|