codexly-ui 0.16.1 → 0.17.0

package/fesm2022/codexly-ui.mjs

@@ -16120,8 +16120,8 @@ class ClxStatCardComponent {
       <div class="w-full flex items-center gap-2">
         <!-- Icon + value -->
         <div class="flex items-center gap-2 min-w-0 flex-1">
-          <div class="shrink-0 w-9 h-9 rounded-full flex items-center justify-center" [class]="_iconBgSubtle()">
-            <span clx-icon [name]="metric().icon" size="sm" [class]="_iconTextBase()"></span>
+          <div class="shrink-0 w-9 h-9 rounded-full flex items-center justify-center" [class]="_iconBg()">
+            <span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
           </div>
           <span class="text-lg font-semibold text-clx-text leading-tight">{{ _formattedValue() }}</span>
         </div>
@@ -16285,8 +16285,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       <div class="w-full flex items-center gap-2">
         <!-- Icon + value -->
         <div class="flex items-center gap-2 min-w-0 flex-1">
-          <div class="shrink-0 w-9 h-9 rounded-full flex items-center justify-center" [class]="_iconBgSubtle()">
-            <span clx-icon [name]="metric().icon" size="sm" [class]="_iconTextBase()"></span>
+          <div class="shrink-0 w-9 h-9 rounded-full flex items-center justify-center" [class]="_iconBg()">
+            <span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
           </div>
           <span class="text-lg font-semibold text-clx-text leading-tight">{{ _formattedValue() }}</span>
         </div>
@@ -16767,9 +16767,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], propDecorators: { imageSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageSrc", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], price: [{ type: i0.Input, args: [{ isSignal: true, alias: "price", required: false }] }], soldQty: [{ type: i0.Input, args: [{ isSignal: true, alias: "soldQty", required: false }] }] } });
 
-/** A ranking: color dot + label on the left, optional trend badge + value on the right — e.g. "Top
- *  selling categories" or "Sales by channel" on a dashboard. Composes ClxListComponent/
- *  ClxListItemComponent (their clxLead/clxTrail slots) rather than reinventing list chrome. */
+/** A ranking: color dot (or a saturated icon circle) + label on the left, optional trend badge +
+ *  value on the right — e.g. "Top selling categories" or "Sales by channel" on a dashboard.
+ *  Composes ClxListComponent/ClxListItemComponent (their clxLead/clxTrail slots) rather than
+ *  reinventing list chrome. */
 class ClxRankedListComponent {
     items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
@@ -16786,8 +16787,14 @@ class ClxRankedListComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxRankedListComponent, isStandalone: true, selector: "clx-ranked-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <clx-list [color]="color()">
       @for (item of items(); track item.label) {
-        <clx-list-item [label]="item.label">
-          <span clxLead class="w-2 h-2 rounded-full shrink-0" [class]="dotClass(item.colorDot)"></span>
+        <clx-list-item [label]="item.label" [sublabel]="item.sublabel ?? ''">
+          @if (item.icon) {
+            <div clxLead class="w-9 h-9 rounded-full flex items-center justify-center shrink-0" [class]="dotClass(item.colorDot)">
+              <span clx-icon [name]="item.icon" size="sm" class="text-white"></span>
+            </div>
+          } @else {
+            <span clxLead class="w-2 h-2 rounded-full shrink-0" [class]="dotClass(item.colorDot)"></span>
+          }
           <div clxTrail class="flex items-center gap-2">
             @if (item.trend) {
               <span clx-badge size="xs" variant="light" shape="pill" [color]="trendColor(item.trendDirection)">
@@ -16812,8 +16819,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     template: `
     <clx-list [color]="color()">
       @for (item of items(); track item.label) {
-        <clx-list-item [label]="item.label">
-          <span clxLead class="w-2 h-2 rounded-full shrink-0" [class]="dotClass(item.colorDot)"></span>
+        <clx-list-item [label]="item.label" [sublabel]="item.sublabel ?? ''">
+          @if (item.icon) {
+            <div clxLead class="w-9 h-9 rounded-full flex items-center justify-center shrink-0" [class]="dotClass(item.colorDot)">
+              <span clx-icon [name]="item.icon" size="sm" class="text-white"></span>
+            </div>
+          } @else {
+            <span clxLead class="w-2 h-2 rounded-full shrink-0" [class]="dotClass(item.colorDot)"></span>
+          }
           <div clxTrail class="flex items-center gap-2">
             @if (item.trend) {
               <span clx-badge size="xs" variant="light" shape="pill" [color]="trendColor(item.trendDirection)">
@@ -16830,6 +16843,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
+const SEVERITY_COLOR = {
+    critical: 'red',
+    warning: 'amber',
+    info: 'sky',
+};
+const SEVERITY_ICON = {
+    critical: 'error',
+    warning: 'warning',
+    info: 'info',
+};
+const SEVERITY_LABEL = {
+    critical: 'Crítico',
+    warning: 'Bajo',
+    info: 'Info',
+};
+/** A list of alert rows: severity icon chip + title + short description on the left, severity
+ *  badge on the right — e.g. "Stock bajo" on the Inventory dashboard. Distinct from
+ *  ClxRankedListComponent (which pairs a value with an optional trend, for rankings) — this widget
+ *  has no numeric value, just a problem description and how bad it is. */
+class ClxAlertListComponent {
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    chipClass(severity) {
+        return resolveColor(SEVERITY_COLOR[severity]).bgSubtle;
+    }
+    iconClass(severity) {
+        return resolveColor(SEVERITY_COLOR[severity]).textSubtle;
+    }
+    badgeColor(severity) {
+        return SEVERITY_COLOR[severity];
+    }
+    icon(severity) {
+        return SEVERITY_ICON[severity];
+    }
+    label(severity) {
+        return SEVERITY_LABEL[severity];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAlertListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxAlertListComponent, isStandalone: true, selector: "clx-alert-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "flex flex-col" }, ngImport: i0, template: `
+    @for (item of items(); track item.title; let last = $last) {
+      <div class="flex items-center gap-3 py-2.5" [class.border-b]="!last" [class.border-clx-border-soft]="!last">
+        <div class="w-9 h-9 rounded-full flex items-center justify-center shrink-0" [class]="chipClass(item.severity)">
+          <span clx-icon [name]="icon(item.severity)" size="sm" [class]="iconClass(item.severity)"></span>
+        </div>
+        <div class="min-w-0 flex-1">
+          <p class="text-sm text-clx-text-label truncate">{{ item.title }}</p>
+          <p class="text-xs text-clx-text-muted truncate">{{ item.description }}</p>
+        </div>
+        <span clx-badge size="xs" variant="light" shape="pill" [color]="badgeColor(item.severity)" class="shrink-0">
+          {{ label(item.severity) }}
+        </span>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAlertListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-alert-list',
+                    standalone: true,
+                    imports: [ClxBadgeComponent, ClxIconComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'flex flex-col' },
+                    template: `
+    @for (item of items(); track item.title; let last = $last) {
+      <div class="flex items-center gap-3 py-2.5" [class.border-b]="!last" [class.border-clx-border-soft]="!last">
+        <div class="w-9 h-9 rounded-full flex items-center justify-center shrink-0" [class]="chipClass(item.severity)">
+          <span clx-icon [name]="icon(item.severity)" size="sm" [class]="iconClass(item.severity)"></span>
+        </div>
+        <div class="min-w-0 flex-1">
+          <p class="text-sm text-clx-text-label truncate">{{ item.title }}</p>
+          <p class="text-xs text-clx-text-muted truncate">{{ item.description }}</p>
+        </div>
+        <span clx-badge size="xs" variant="light" shape="pill" [color]="badgeColor(item.severity)" class="shrink-0">
+          {{ label(item.severity) }}
+        </span>
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }] } });
+
 const PRODUCT_TAG_LABEL = {
     'new': 'Nuevo',
     'sale': 'Oferta',
@@ -19433,5 +19527,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardExpiryInputComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCardNumberInputComponent, ClxCardValidators, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxCollapseComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorImageModalComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNotificationComponent, ClxNumberComponent, ClxOtpComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRankedListComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableActionsComponent, ClxTableComponent, ClxTableProductCellComponent, ClxTableProgressCellComponent, ClxTableStatusCellComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWidgetCardComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, detectClxCardBrand, isClxCardExpired, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
+export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertListComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardExpiryInputComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCardNumberInputComponent, ClxCardValidators, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxCollapseComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorImageModalComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNotificationComponent, ClxNumberComponent, ClxOtpComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRankedListComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableActionsComponent, ClxTableComponent, ClxTableProductCellComponent, ClxTableProgressCellComponent, ClxTableStatusCellComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWidgetCardComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, detectClxCardBrand, isClxCardExpired, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map