@vallift/ngl 22.0.57 → 22.0.59

package/fesm2022/vallift-ngl.mjs

@@ -15157,9 +15157,18 @@ const APPEARANCE_CLASSES = {
     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) {
+function stripBackgroundClasses(classes) {
+    return classes
+        .split(/\s+/)
+        .filter((token) => token && !/^(hover:|active:)?bg-/.test(token))
+        .join(' ');
+}
+function getSignalButtonClasses(appearance, size, disabled, fullWidth, customFill = false) {
     const widthClass = fullWidth ? 'w-full' : '';
-    const stateClasses = disabled ? DISABLED_CLASSES : APPEARANCE_CLASSES[appearance];
+    let stateClasses = disabled ? DISABLED_CLASSES : APPEARANCE_CLASSES[appearance];
+    if (customFill && !disabled) {
+        stateClasses = stripBackgroundClasses(stateClasses);
+    }
     return `${BASE_CLASSES} ${SIZE_CLASSES[size]} ${stateClasses} ${widthClass}`.trim();
 }
 function getSignalButtonIconClasses(appearance, disabled) {
@@ -15202,8 +15211,11 @@ class SignalButton {
     ...(ngDevMode ? [{ debugName: "iconSrc" }] : /* istanbul ignore next */ []));
     iconSize = input(18, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    /** Optional CSS color for the button surface (e.g. `#ffffff`). Overrides appearance bg classes. */
+    fillColor = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fillColor" }] : /* istanbul ignore next */ []));
     clicked = output();
-    buttonClasses = computed(() => getSignalButtonClasses(this.appearance(), this.size(), this.disabled(), this.fullWidth()), /* @ts-ignore */
+    buttonClasses = computed(() => getSignalButtonClasses(this.appearance(), this.size(), this.disabled(), this.fullWidth(), !!this.fillColor()?.trim()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "buttonClasses" }] : /* istanbul ignore next */ []));
     iconClasses = computed(() => getSignalButtonIconClasses(this.appearance(), this.disabled()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
@@ -15225,12 +15237,12 @@ class SignalButton {
         this.clicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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  class=\"cursor-pointer\"\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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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 }, fillColor: { classPropertyName: "fillColor", publicName: "fillColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  class=\"cursor-pointer\"\n  [type]=\"type()\"\n  [disabled]=\"disabled() || loading()\"\n  [class]=\"buttonClasses()\"\n  [style.background-color]=\"disabled() ? null : fillColor() || null\"\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.1.1", ngImport: i0, type: SignalButton, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-signal-button', imports: [AppSvgIconComponent, SpinnerComponent], template: "<button\n  class=\"cursor-pointer\"\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"] }] } });
+            args: [{ selector: 'lib-signal-button', imports: [AppSvgIconComponent, SpinnerComponent], template: "<button\n  class=\"cursor-pointer\"\n  [type]=\"type()\"\n  [disabled]=\"disabled() || loading()\"\n  [class]=\"buttonClasses()\"\n  [style.background-color]=\"disabled() ? null : fillColor() || null\"\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 }] }], fillColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillColor", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 class SignalError {
     signalFormErrors = inject(SIGNAL_FORM_ERRORS);
@@ -15567,5 +15579,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseSignalInput, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ColorConverterService, ColorFormats, ColorPickerComponent, ColorPickerDirective, ContextMenuButtonComponent, ContextMenuIconComponent, DEFAULT_NGL_BUTTON_CONFIG, DEFAULT_NGL_INPUT_CONFIG, DEFAULT_NGL_LIST_RESPONSE, DEFAULT_NGL_OVERLAY_CONFIG, DEFAULT_NGL_PAGINATION_CONFIG, 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, SIGNAL_FORM_ERRORS, SharedConstants, ShimmerComponent, SignalButton, SignalCheckbox, SignalColorField, SignalDataTableComponent, SignalDateField, SignalDatePicker, SignalDateRangeField, SignalDateRangePicker, SignalDropdown, SignalError, SignalFormDirective, SignalFormValidators, 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, defaultSignalFormErrors, getDynamicTypeStructure, getSignalButtonClasses, getSignalButtonIconClasses, getSignalButtonSpinnerBorderClass, getSignalFieldErrorMessage, getSignalValidationErrorMessage, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, phoneNumbers, phoneNumbersAll, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase, validateSignalForm };
+export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseFormControl, BaseInputComponent, BaseOverlayComponent, BaseSignalInput, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ColorConverterService, ColorFormats, ColorPickerComponent, ColorPickerDirective, ContextMenuButtonComponent, ContextMenuIconComponent, DEFAULT_NGL_BUTTON_CONFIG, DEFAULT_NGL_INPUT_CONFIG, DEFAULT_NGL_LIST_RESPONSE, DEFAULT_NGL_OVERLAY_CONFIG, DEFAULT_NGL_PAGINATION_CONFIG, 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, SIGNAL_FORM_ERRORS, SharedConstants, ShimmerComponent, SignalButton, SignalCheckbox, SignalColorField, SignalDataTableComponent, SignalDateField, SignalDatePicker, SignalDateRangeField, SignalDateRangePicker, SignalDropdown, SignalError, SignalFormDirective, SignalFormValidators, 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, defaultSignalFormErrors, getDynamicTypeStructure, getSignalButtonClasses, getSignalButtonIconClasses, getSignalButtonSpinnerBorderClass, getSignalFieldErrorMessage, getSignalValidationErrorMessage, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, phoneNumbers, phoneNumbersAll, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase, validateSignalForm };
 //# sourceMappingURL=vallift-ngl.mjs.map