@vallift/ngl 22.0.57 → 22.0.58

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);