@vallift/ngl 22.0.3 → 22.0.4

package/fesm2022/vallift-ngl.mjs

@@ -14159,6 +14159,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                 args: ['trackRef']
             }] } });
 
+function validateSignalForm(signalForm) {
+    const root = signalForm();
+    root.markAsTouched();
+    if (root.invalid()) {
+        root.focusBoundControl();
+        return false;
+    }
+    return true;
+}
+
+class SignalFormDirective {
+    fieldTree = input.required({ ...(ngDevMode ? { debugName: "fieldTree" } : /* istanbul ignore next */ {}), alias: 'signalForm' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: SignalFormDirective, isStandalone: true, selector: "form[signalForm]", inputs: { fieldTree: { classPropertyName: "fieldTree", publicName: "signalForm", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalFormDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'form[signalForm]',
+                }]
+        }], propDecorators: { fieldTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "signalForm", required: true }] }] } });
+
+const BASE_CLASSES = 'relative inline-flex items-center justify-center gap-2 rounded-lg text-button whitespace-nowrap transition-colors duration-200 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary-subtle';
+const SIZE_CLASSES = {
+    sm: 'h-9 px-4 text-caption',
+    md: 'h-10 px-5 text-body2',
+    lg: 'h-11 px-5 text-body1',
+};
+const DISABLED_CLASSES = 'bg-surface-disabled text-role-disabled border border-disabled cursor-not-allowed';
+const APPEARANCE_CLASSES = {
+    primary: 'bg-surface-primary text-primary-on-color hover:bg-surface-primary-hover active:bg-surface-primary-active border border-transparent',
+    outline: 'bg-transparent border border-default text-primary hover:border-primary-hover hover:bg-page-secondary active:bg-surface-primary-subtle',
+    ghost: 'bg-transparent border border-transparent text-primary hover:bg-page-secondary active:bg-surface-primary-subtle',
+    text: 'bg-transparent border border-transparent text-primary hover:text-primary-hover active:text-primary-active',
+};
+function getSignalButtonClasses(appearance, size, disabled, fullWidth) {
+    const widthClass = fullWidth ? 'w-full' : '';
+    const stateClasses = disabled ? DISABLED_CLASSES : APPEARANCE_CLASSES[appearance];
+    return `${BASE_CLASSES} ${SIZE_CLASSES[size]} ${stateClasses} ${widthClass}`.trim();
+}
+function getSignalButtonIconClasses(appearance, disabled) {
+    if (disabled) {
+        return 'text-role-disabled';
+    }
+    switch (appearance) {
+        case 'primary':
+            return 'text-primary-on-color';
+        case 'outline':
+        case 'ghost':
+        case 'text':
+        default:
+            return 'text-primary';
+    }
+}
+function getSignalButtonSpinnerBorderClass(appearance, disabled) {
+    if (disabled) {
+        return 'border-disabled';
+    }
+    return appearance === 'primary' ? 'border-primary-on-color' : 'border-primary';
+}
+
+class SignalButton {
+    parentSignalForm = inject(SignalFormDirective, { optional: true });
+    type = input('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    appearance = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    fullWidth = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    iconSrc = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconSrc" }] : /* istanbul ignore next */ []));
+    iconSize = input(18, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    clicked = output();
+    buttonClasses = computed(() => getSignalButtonClasses(this.appearance(), this.size(), this.disabled(), this.fullWidth()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonClasses" }] : /* istanbul ignore next */ []));
+    iconClasses = computed(() => getSignalButtonIconClasses(this.appearance(), this.disabled()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
+    spinnerBorderClass = computed(() => getSignalButtonSpinnerBorderClass(this.appearance(), this.disabled()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spinnerBorderClass" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        if (this.disabled() || this.loading()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        if (this.type() === 'submit' && this.parentSignalForm) {
+            if (!validateSignalForm(this.parentSignalForm.fieldTree())) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+        }
+        this.clicked.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalButton, isStandalone: true, selector: "lib-signal-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  [type]=\"type()\"\n  [disabled]=\"disabled() || loading()\"\n  [class]=\"buttonClasses()\"\n  [attr.aria-busy]=\"loading() || null\"\n  (click)=\"onClick($event)\">\n  @if (iconSrc()) {\n    <app-svg-icon\n      [src]=\"iconSrc()!\"\n      [size]=\"iconSize()\"\n      [class]=\"iconClasses() + (loading() ? ' invisible' : '')\" />\n  }\n\n  <span [class.invisible]=\"loading()\">\n    <ng-content />\n  </span>\n\n  @if (loading()) {\n    <app-spinner\n      class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\"\n      [borderColor]=\"spinnerBorderClass()\" />\n  }\n</button>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: SpinnerComponent, selector: "app-spinner", inputs: ["borderColor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-signal-button', imports: [AppSvgIconComponent, SpinnerComponent], template: "<button\n  [type]=\"type()\"\n  [disabled]=\"disabled() || loading()\"\n  [class]=\"buttonClasses()\"\n  [attr.aria-busy]=\"loading() || null\"\n  (click)=\"onClick($event)\">\n  @if (iconSrc()) {\n    <app-svg-icon\n      [src]=\"iconSrc()!\"\n      [size]=\"iconSize()\"\n      [class]=\"iconClasses() + (loading() ? ' invisible' : '')\" />\n  }\n\n  <span [class.invisible]=\"loading()\">\n    <ng-content />\n  </span>\n\n  @if (loading()) {\n    <app-spinner\n      class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\"\n      [borderColor]=\"spinnerBorderClass()\" />\n  }\n</button>\n" }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+
 class DateUtils {
     convertToMMDDYYYY(dateString) {
         if (!dateString) {
@@ -14458,5 +14567,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ColorConverterService, ColorFormats, ColorPickerComponent, ColorPickerDirective, ContextMenuButtonComponent, ContextMenuIconComponent, DEFAULT_PHONE_COUNTRIES, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InfiniteScrollDirective, InfiniteScrollModule, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OpenFloatingMenuDirective, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SharedConstants, ShimmerComponent, SignalCheckbox, SignalDateField, SignalDatePicker, SignalDateRangeField, SignalDateRangePicker, SignalDropdown, SignalMultiSelectDropdown, SignalNumberField, SignalOtpField, SignalPhoneNumberField, SignalRadio, SignalRadioGroup, SignalRangeSlider, SignalRating, SignalSlider, SignalSwitch, SignalTextField, SignalTextarea, SignalTimeField, SignalTimePicker, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, ThemeService, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipDirective, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, getDynamicTypeStructure, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, phoneNumbers, phoneNumbersAll, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase };
+export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ColorConverterService, ColorFormats, ColorPickerComponent, ColorPickerDirective, ContextMenuButtonComponent, ContextMenuIconComponent, DEFAULT_PHONE_COUNTRIES, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InfiniteScrollDirective, InfiniteScrollModule, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OpenFloatingMenuDirective, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SharedConstants, ShimmerComponent, SignalButton, SignalCheckbox, SignalDateField, SignalDatePicker, SignalDateRangeField, SignalDateRangePicker, SignalDropdown, SignalFormDirective, SignalMultiSelectDropdown, SignalNumberField, SignalOtpField, SignalPhoneNumberField, SignalRadio, SignalRadioGroup, SignalRangeSlider, SignalRating, SignalSlider, SignalSwitch, SignalTextField, SignalTextarea, SignalTimeField, SignalTimePicker, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, ThemeService, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipDirective, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, getDynamicTypeStructure, getSignalButtonClasses, getSignalButtonIconClasses, getSignalButtonSpinnerBorderClass, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, phoneNumbers, phoneNumbersAll, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase, validateSignalForm };
 //# sourceMappingURL=vallift-ngl.mjs.map