@underlayerdev/ui 0.19.0 → 0.20.0

package/fesm2022/underlayerdev-ui.mjs

@@ -12068,6 +12068,96 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+var ProgressBarComponent = class ProgressBarComponent {
+	value = input(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	fixed = input(false, ...ngDevMode ? [{ debugName: "fixed" }] : /* istanbul ignore next */ []);
+	label = input("Loading", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	clampedValue = computed(() => {
+		const value = this.value();
+		return value === null ? null : Math.min(100, Math.max(0, value));
+	}, ...ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ProgressBarComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: ProgressBarComponent,
+		isStandalone: true,
+		selector: "ul-progress-bar",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fixed: {
+				classPropertyName: "fixed",
+				publicName: "fixed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<div\n  class=\"ul-progress-bar\"\n  [class.ul-progress-bar--fixed]=\"fixed()\"\n  [class.ul-progress-bar--indeterminate]=\"clampedValue() === null\"\n  role=\"progressbar\"\n  [attr.aria-label]=\"label()\"\n  [attr.aria-valuemin]=\"clampedValue() === null ? null : 0\"\n  [attr.aria-valuemax]=\"clampedValue() === null ? null : 100\"\n  [attr.aria-valuenow]=\"clampedValue()\"\n>\n  <div\n    class=\"ul-progress-bar__fill\"\n    [style.transform]=\"clampedValue() === null ? null : 'scaleX(' + clampedValue()! / 100 + ')'\"\n  ></div>\n</div>\n",
+		styles: [":host{display:block}.ul-progress-bar{position:relative;width:100%;height:4px;overflow:hidden}.ul-progress-bar--fixed{position:fixed;inset-block-start:0;inset-inline:0;z-index:1200}.ul-progress-bar__fill{position:absolute;inset:0;background-color:#6f3de0;transform-origin:left;transition:transform .2s ease-out}.ul-progress-bar--indeterminate .ul-progress-bar__fill{animation:ul-progress-bar-indeterminate 1.2s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.ul-progress-bar--indeterminate .ul-progress-bar__fill{animation:none}}@keyframes ul-progress-bar-indeterminate{0%{transform:scaleX(0)}60%{transform:scaleX(.8)}to{transform:scaleX(1);opacity:0}}\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ProgressBarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ul-progress-bar",
+			template: "<div\n  class=\"ul-progress-bar\"\n  [class.ul-progress-bar--fixed]=\"fixed()\"\n  [class.ul-progress-bar--indeterminate]=\"clampedValue() === null\"\n  role=\"progressbar\"\n  [attr.aria-label]=\"label()\"\n  [attr.aria-valuemin]=\"clampedValue() === null ? null : 0\"\n  [attr.aria-valuemax]=\"clampedValue() === null ? null : 100\"\n  [attr.aria-valuenow]=\"clampedValue()\"\n>\n  <div\n    class=\"ul-progress-bar__fill\"\n    [style.transform]=\"clampedValue() === null ? null : 'scaleX(' + clampedValue()! / 100 + ')'\"\n  ></div>\n</div>\n",
+			styles: [":host{display:block}.ul-progress-bar{position:relative;width:100%;height:4px;overflow:hidden}.ul-progress-bar--fixed{position:fixed;inset-block-start:0;inset-inline:0;z-index:1200}.ul-progress-bar__fill{position:absolute;inset:0;background-color:#6f3de0;transform-origin:left;transition:transform .2s ease-out}.ul-progress-bar--indeterminate .ul-progress-bar__fill{animation:ul-progress-bar-indeterminate 1.2s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.ul-progress-bar--indeterminate .ul-progress-bar__fill{animation:none}}@keyframes ul-progress-bar-indeterminate{0%{transform:scaleX(0)}60%{transform:scaleX(.8)}to{transform:scaleX(1);opacity:0}}\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		fixed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fixed",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}]
+	}
+});
 var RadioComponent = class RadioComponent {
 	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
 	name = input.required(...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
@@ -16275,6 +16365,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BannerComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CategoryPickerComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DockComponent, DockItemComponent, DockItemContentSlotDirective, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageCropperComponent, ImageNotFoundComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, LoadMoreComponent, LongPressDirective, MenuComponent, MenuItemComponent, 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 };
+export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BannerComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CategoryPickerComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DockComponent, DockItemComponent, DockItemContentSlotDirective, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageCropperComponent, ImageNotFoundComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, LoadMoreComponent, LongPressDirective, MenuComponent, MenuItemComponent, MenuItemsComponent, MenuTriggerComponent, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, ProgressBarComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchInputComponent, SearchSelectComponent, SelectComponent, SelectableRowComponent, SidebarComponent, SkeletonComponent, StatusComponent, StepperComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, ToggleComponent, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
 
 //# sourceMappingURL=underlayerdev-ui.mjs.map