@ajuarezso/sui-design-system 0.18.9 → 0.18.10

package/fesm2022/ajuarezso-sui-design-system.mjs

@@ -15867,8 +15867,22 @@ class SuiStatusBadge {
      * En appearance="light", el texto mantiene state-base salvo para status="disabled".
      */
     withDot = input(false, ...(ngDevMode ? [{ debugName: "withDot" }] : /* istanbul ignore next */ []));
-    /** Icono Remix mapeado al status. Solo se usa cuando withDot=false. */
-    iconName = computed(() => {
+    /**
+     * Icono propio, en lugar del que trae el status.
+     *
+     * El status manda el COLOR y, por defecto, también el icono — que es lo
+     * correcto para un estado: un pago completado siempre lleva el mismo check.
+     * Pero el componente también se usa para etiquetas de marca («Local
+     * exclusivo», «Mismo precio que en el local»), donde el color semántico
+     * sirve y el icono no: ahí la «i» de `information` no dice exclusividad.
+     *
+     * Nombre Remix SIN prefijo, igual que `sui-icon` (`vip-crown-2-fill`).
+     * Vacío = el del status. No hace nada con `withDot`.
+     */
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** El icono que se pinta: el propio si lo hay, si no el del status. */
+    iconName = computed(() => this.icon().trim() || this.iconoDelStatus(), ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+    iconoDelStatus = computed(() => {
         switch (this.status()) {
             case 'completed': return 'checkbox-circle-fill';
             case 'pending': return 'alert-fill';
@@ -15876,9 +15890,9 @@ class SuiStatusBadge {
             case 'information': return 'information-fill';
             case 'disabled': return 'forbid-fill';
         }
-    }, ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+    }, ...(ngDevMode ? [{ debugName: "iconoDelStatus" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiStatusBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiStatusBadge, isStandalone: true, selector: "sui-status-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, withDot: { classPropertyName: "withDot", publicName: "withDot", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-sui-status": "status()", "attr.data-sui-appearance": "appearance()", "attr.data-sui-with-dot": "withDot() ? \"\" : null", "attr.role": "\"status\"" } }, ngImport: i0, template: "@if (withDot()) {\n  <span class=\"sui-status-badge__dot\" aria-hidden=\"true\"></span>\n} @else {\n  <span class=\"sui-status-badge__icon\" aria-hidden=\"true\">\n    <sui-icon [name]=\"iconName()\" [size]=\"12\" />\n  </span>\n}\n<span class=\"sui-status-badge__label\"><ng-content></ng-content></span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;box-sizing:border-box;height:24px;padding:4px 8px 4px 4px;border:1px solid transparent;border-radius:var(--sui-radius-6);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap;vertical-align:middle;overflow:clip;gap:4px}:host([data-sui-with-dot]){gap:2px}.sui-status-badge__icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.sui-status-badge__dot{display:inline-block;width:16px;height:16px;flex-shrink:0;background-image:radial-gradient(circle at center,currentColor 0,currentColor 3px,transparent 3.5px)}.sui-status-badge__label{display:inline-flex;align-items:center}:host([data-sui-status=completed][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-success-base)}:host([data-sui-status=completed][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=completed][data-sui-appearance=light]){background:var(--sui-state-success-lighter);border-color:transparent;color:var(--sui-state-success-base)}:host([data-sui-status=completed][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-success-base)}:host([data-sui-status=pending][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-warning-base)}:host([data-sui-status=pending][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=pending][data-sui-appearance=light]){background:var(--sui-state-warning-lighter);border-color:transparent;color:var(--sui-state-warning-base)}:host([data-sui-status=pending][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-warning-base)}:host([data-sui-status=failed][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-error-base)}:host([data-sui-status=failed][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=failed][data-sui-appearance=light]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-status=failed][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-error-base)}:host([data-sui-status=information][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-information-base)}:host([data-sui-status=information][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=information][data-sui-appearance=light]){background:var(--sui-state-information-lighter);border-color:transparent;color:var(--sui-state-information-base)}:host([data-sui-status=information][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-information-base)}:host([data-sui-status=disabled][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=disabled][data-sui-appearance=light]){background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-text-sub-600)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiStatusBadge, isStandalone: true, selector: "sui-status-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, withDot: { classPropertyName: "withDot", publicName: "withDot", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-sui-status": "status()", "attr.data-sui-appearance": "appearance()", "attr.data-sui-with-dot": "withDot() ? \"\" : null", "attr.role": "\"status\"" } }, ngImport: i0, template: "@if (withDot()) {\n  <span class=\"sui-status-badge__dot\" aria-hidden=\"true\"></span>\n} @else {\n  <span class=\"sui-status-badge__icon\" aria-hidden=\"true\">\n    <sui-icon [name]=\"iconName()\" [size]=\"12\" />\n  </span>\n}\n<span class=\"sui-status-badge__label\"><ng-content></ng-content></span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;box-sizing:border-box;height:24px;padding:4px 8px 4px 4px;border:1px solid transparent;border-radius:var(--sui-radius-6);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap;vertical-align:middle;overflow:clip;gap:4px}:host([data-sui-with-dot]){gap:2px}.sui-status-badge__icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.sui-status-badge__dot{display:inline-block;width:16px;height:16px;flex-shrink:0;background-image:radial-gradient(circle at center,currentColor 0,currentColor 3px,transparent 3.5px)}.sui-status-badge__label{display:inline-flex;align-items:center}:host([data-sui-status=completed][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-success-base)}:host([data-sui-status=completed][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=completed][data-sui-appearance=light]){background:var(--sui-state-success-lighter);border-color:transparent;color:var(--sui-state-success-base)}:host([data-sui-status=completed][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-success-base)}:host([data-sui-status=pending][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-warning-base)}:host([data-sui-status=pending][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=pending][data-sui-appearance=light]){background:var(--sui-state-warning-lighter);border-color:transparent;color:var(--sui-state-warning-base)}:host([data-sui-status=pending][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-warning-base)}:host([data-sui-status=failed][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-error-base)}:host([data-sui-status=failed][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=failed][data-sui-appearance=light]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-status=failed][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-error-base)}:host([data-sui-status=information][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-information-base)}:host([data-sui-status=information][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=information][data-sui-appearance=light]){background:var(--sui-state-information-lighter);border-color:transparent;color:var(--sui-state-information-base)}:host([data-sui-status=information][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-information-base)}:host([data-sui-status=disabled][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=disabled][data-sui-appearance=light]){background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-text-sub-600)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiStatusBadge, decorators: [{
             type: Component,
@@ -15888,7 +15902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-sui-with-dot]': 'withDot() ? "" : null',
                         '[attr.role]': '"status"',
                     }, template: "@if (withDot()) {\n  <span class=\"sui-status-badge__dot\" aria-hidden=\"true\"></span>\n} @else {\n  <span class=\"sui-status-badge__icon\" aria-hidden=\"true\">\n    <sui-icon [name]=\"iconName()\" [size]=\"12\" />\n  </span>\n}\n<span class=\"sui-status-badge__label\"><ng-content></ng-content></span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;box-sizing:border-box;height:24px;padding:4px 8px 4px 4px;border:1px solid transparent;border-radius:var(--sui-radius-6);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap;vertical-align:middle;overflow:clip;gap:4px}:host([data-sui-with-dot]){gap:2px}.sui-status-badge__icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.sui-status-badge__dot{display:inline-block;width:16px;height:16px;flex-shrink:0;background-image:radial-gradient(circle at center,currentColor 0,currentColor 3px,transparent 3.5px)}.sui-status-badge__label{display:inline-flex;align-items:center}:host([data-sui-status=completed][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-success-base)}:host([data-sui-status=completed][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=completed][data-sui-appearance=light]){background:var(--sui-state-success-lighter);border-color:transparent;color:var(--sui-state-success-base)}:host([data-sui-status=completed][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-success-base)}:host([data-sui-status=pending][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-warning-base)}:host([data-sui-status=pending][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=pending][data-sui-appearance=light]){background:var(--sui-state-warning-lighter);border-color:transparent;color:var(--sui-state-warning-base)}:host([data-sui-status=pending][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-warning-base)}:host([data-sui-status=failed][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-error-base)}:host([data-sui-status=failed][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=failed][data-sui-appearance=light]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-status=failed][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-error-base)}:host([data-sui-status=information][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-information-base)}:host([data-sui-status=information][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=information][data-sui-appearance=light]){background:var(--sui-state-information-lighter);border-color:transparent;color:var(--sui-state-information-base)}:host([data-sui-status=information][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-information-base)}:host([data-sui-status=disabled][data-sui-appearance=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=stroke]) .sui-status-badge__label{color:var(--sui-text-sub-600)}:host([data-sui-status=disabled][data-sui-appearance=light]){background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-state-faded-base)}:host([data-sui-status=disabled][data-sui-appearance=light]) .sui-status-badge__label{color:var(--sui-text-sub-600)}\n"] }]
-        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], withDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "withDot", required: false }] }] } });
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], withDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "withDot", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
 
 /**
  * SUI Stepper — SUI Design System 2.0