@underlayerdev/ui 0.9.5 → 0.9.6
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.
|
@@ -3559,6 +3559,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
3559
3559
|
}]
|
|
3560
3560
|
}], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
3561
3561
|
|
|
3562
|
+
/**
|
|
3563
|
+
* Presentational step indicator for a multi-step flow (e.g. onboarding,
|
|
3564
|
+
* checkout) — dots connected by a line, current/completed/upcoming states.
|
|
3565
|
+
* Purely visual: it has no notion of step content or navigation, the
|
|
3566
|
+
* consumer owns that. `currentStep` is 1-indexed.
|
|
3567
|
+
*/
|
|
3568
|
+
class StepperComponent {
|
|
3569
|
+
totalSteps = input.required(/* @ts-ignore */
|
|
3570
|
+
...(ngDevMode ? [{ debugName: "totalSteps" }] : /* istanbul ignore next */ []));
|
|
3571
|
+
currentStep = input.required(/* @ts-ignore */
|
|
3572
|
+
...(ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []));
|
|
3573
|
+
labels = input([], /* @ts-ignore */
|
|
3574
|
+
...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
|
|
3575
|
+
ariaLabel = input(null, /* @ts-ignore */
|
|
3576
|
+
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
3577
|
+
stepIndexes = computed(() => Array.from({ length: this.totalSteps() }, (_, i) => i + 1), /* @ts-ignore */
|
|
3578
|
+
...(ngDevMode ? [{ debugName: "stepIndexes" }] : /* istanbul ignore next */ []));
|
|
3579
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3580
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: StepperComponent, isStandalone: true, selector: "ul-stepper", inputs: { totalSteps: { classPropertyName: "totalSteps", publicName: "totalSteps", isSignal: true, isRequired: true, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
3581
|
+
<ol class="ul-stepper" [attr.aria-label]="ariaLabel()">
|
|
3582
|
+
@for (step of stepIndexes(); track step) {
|
|
3583
|
+
<li
|
|
3584
|
+
class="ul-stepper__item"
|
|
3585
|
+
[class.ul-stepper__item--completed]="step < currentStep()"
|
|
3586
|
+
[class.ul-stepper__item--current]="step === currentStep()"
|
|
3587
|
+
[attr.aria-current]="step === currentStep() ? 'step' : null"
|
|
3588
|
+
>
|
|
3589
|
+
<span class="ul-stepper__dot"></span>
|
|
3590
|
+
@if (labels()[step - 1]) {
|
|
3591
|
+
<span class="ul-stepper__label">{{ labels()[step - 1] }}</span>
|
|
3592
|
+
}
|
|
3593
|
+
</li>
|
|
3594
|
+
}
|
|
3595
|
+
</ol>
|
|
3596
|
+
`, isInline: true, styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-stepper{display:flex;align-items:flex-start;list-style:none;margin:0;padding:0}.ul-stepper__item{display:flex;flex:1;flex-direction:column;align-items:center;position:relative}.ul-stepper__item:not(:last-child):after{content:\"\";position:absolute;top:6px;left:calc(50% + 8px);width:calc(100% - 16px);height:2px;background-color:#ffffff80;transition:background-color .25s cubic-bezier(.4,0,.2,1)}.ul-stepper__item--completed:not(:last-child):after{background-color:#6f3de0}.ul-stepper__dot{width:12px;height:12px;border-radius:4096px;background-color:#fff3;border:2px solid rgba(255,255,255,.5);position:relative;z-index:1;transition:background-color .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1)}.ul-stepper__item--completed .ul-stepper__dot{background-color:#6f3de0;border-color:#6f3de0}.ul-stepper__item--current .ul-stepper__dot{border-color:#6f3de0;box-shadow:0 0 0 3px #ffffff1a}.ul-stepper__label{margin-top:8px;color:#ffffffb3;text-align:center;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:1000}.ul-stepper__item--current .ul-stepper__label,.ul-stepper__item--completed .ul-stepper__label{color:#fff}\n"] });
|
|
3597
|
+
}
|
|
3598
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: StepperComponent, decorators: [{
|
|
3599
|
+
type: Component,
|
|
3600
|
+
args: [{ selector: 'ul-stepper', template: `
|
|
3601
|
+
<ol class="ul-stepper" [attr.aria-label]="ariaLabel()">
|
|
3602
|
+
@for (step of stepIndexes(); track step) {
|
|
3603
|
+
<li
|
|
3604
|
+
class="ul-stepper__item"
|
|
3605
|
+
[class.ul-stepper__item--completed]="step < currentStep()"
|
|
3606
|
+
[class.ul-stepper__item--current]="step === currentStep()"
|
|
3607
|
+
[attr.aria-current]="step === currentStep() ? 'step' : null"
|
|
3608
|
+
>
|
|
3609
|
+
<span class="ul-stepper__dot"></span>
|
|
3610
|
+
@if (labels()[step - 1]) {
|
|
3611
|
+
<span class="ul-stepper__label">{{ labels()[step - 1] }}</span>
|
|
3612
|
+
}
|
|
3613
|
+
</li>
|
|
3614
|
+
}
|
|
3615
|
+
</ol>
|
|
3616
|
+
`, styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-stepper{display:flex;align-items:flex-start;list-style:none;margin:0;padding:0}.ul-stepper__item{display:flex;flex:1;flex-direction:column;align-items:center;position:relative}.ul-stepper__item:not(:last-child):after{content:\"\";position:absolute;top:6px;left:calc(50% + 8px);width:calc(100% - 16px);height:2px;background-color:#ffffff80;transition:background-color .25s cubic-bezier(.4,0,.2,1)}.ul-stepper__item--completed:not(:last-child):after{background-color:#6f3de0}.ul-stepper__dot{width:12px;height:12px;border-radius:4096px;background-color:#fff3;border:2px solid rgba(255,255,255,.5);position:relative;z-index:1;transition:background-color .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1)}.ul-stepper__item--completed .ul-stepper__dot{background-color:#6f3de0;border-color:#6f3de0}.ul-stepper__item--current .ul-stepper__dot{border-color:#6f3de0;box-shadow:0 0 0 3px #ffffff1a}.ul-stepper__label{margin-top:8px;color:#ffffffb3;text-align:center;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:1000}.ul-stepper__item--current .ul-stepper__label,.ul-stepper__item--completed .ul-stepper__label{color:#fff}\n"] }]
|
|
3617
|
+
}], propDecorators: { totalSteps: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalSteps", required: true }] }], currentStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStep", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
3618
|
+
|
|
3562
3619
|
const toastIcon = (kind) => {
|
|
3563
3620
|
switch (kind) {
|
|
3564
3621
|
case 'success':
|
|
@@ -4830,5 +4887,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
4830
4887
|
* Generated bundle index. Do not edit.
|
|
4831
4888
|
*/
|
|
4832
4889
|
|
|
4833
|
-
export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DockComponent, DockItemComponent, DockItemContentSlotDirective, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, LongPressDirective, MenuComponent, MenuItemsComponent, MenuTriggerComponent, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchInputComponent, SearchSelectComponent, SelectComponent, SelectableRowComponent, SidebarComponent, SkeletonComponent, StatusComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, ToggleComponent, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
|
|
4890
|
+
export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DockComponent, DockItemComponent, DockItemContentSlotDirective, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, LongPressDirective, MenuComponent, MenuItemsComponent, MenuTriggerComponent, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchInputComponent, SearchSelectComponent, SelectComponent, SelectableRowComponent, SidebarComponent, SkeletonComponent, StatusComponent, StepperComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, ToggleComponent, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
|
|
4834
4891
|
//# sourceMappingURL=underlayerdev-ui.mjs.map
|