codexly-ui 0.6.14 → 0.6.16

package/fesm2022/codexly-ui.mjs

@@ -7797,6 +7797,9 @@ class ClxModalComponent {
             type="button"
             [color]="_cancelColor()"
             [variant]="_cancelVariant()"
+            [icon]="cancelButton()?.icon"
+            [loading]="cancelButton()?.loading ?? false"
+            [disabled]="cancelButton()?.disabled ?? false"
             size="md"
             (click)="cancelClick.emit()">
             {{ _cancelText() }}
@@ -7807,6 +7810,9 @@ class ClxModalComponent {
           type="button"
           [color]="_confirmColor()"
           [variant]="_confirmVariant()"
+          [icon]="confirmButton()?.icon"
+          [loading]="confirmButton()?.loading ?? false"
+          [disabled]="confirmButton()?.disabled ?? false"
           size="md"
           (click)="confirmClick.emit()">
           {{ _confirmText() }}
@@ -7859,6 +7865,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             type="button"
             [color]="_cancelColor()"
             [variant]="_cancelVariant()"
+            [icon]="cancelButton()?.icon"
+            [loading]="cancelButton()?.loading ?? false"
+            [disabled]="cancelButton()?.disabled ?? false"
             size="md"
             (click)="cancelClick.emit()">
             {{ _cancelText() }}
@@ -7869,6 +7878,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           type="button"
           [color]="_confirmColor()"
           [variant]="_confirmVariant()"
+          [icon]="confirmButton()?.icon"
+          [loading]="confirmButton()?.loading ?? false"
+          [disabled]="confirmButton()?.disabled ?? false"
           size="md"
           (click)="confirmClick.emit()">
           {{ _confirmText() }}
@@ -9986,44 +9998,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }] } });
 
+/** Optional replacement for the auto-generated `<h1>` — project this when the title needs
+ *  inline content next to it (a status badge, a monospace order number, extra spans) that a
+ *  plain `title` string input can't express. The `title`/`subtitle` inputs are ignored when
+ *  this is present; ClxPageHeaderComponent's own text-2xl/font-weight/truncate styling is
+ *  NOT applied automatically to projected content — style the projected `<h1>` yourself. */
+class ClxPageHeaderTitleDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPageHeaderTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: ClxPageHeaderTitleDirective, isStandalone: true, selector: "[clxPageHeaderTitle]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPageHeaderTitleDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[clxPageHeaderTitle]', standalone: true }]
+        }] });
+
 /**
- * Standard page title block: title + optional subtitle on the left, a free-content
- * slot (button, select, badge...) on the right. Replaces the hand-rolled
- * `<h1 class="text-2xl font-semibold">` + `<p>` pattern repeated across every page.
+ * Standard page title block: an optional back button, title + optional subtitle on the
+ * left, a free-content slot (button, select, badge...) on the right. Replaces the
+ * hand-rolled `<h1 class="text-2xl font-semibold">` + `<p>` pattern repeated across every page.
+ *
+ * For detail pages whose title needs inline content (a status badge, a monospace order
+ * number) that a plain `title` string can't express, project a `[clxPageHeaderTitle]`
+ * block instead of using the `title`/`subtitle` inputs.
  */
 class ClxPageHeaderComponent {
-    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    _themeSvc = inject(ClxThemeService);
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     subtitle = input(undefined, ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    /** Set to show the back button — `[showBack]="true" (back)="goBack()"`. */
+    showBack = input(false, ...(ngDevMode ? [{ debugName: "showBack" }] : /* istanbul ignore next */ []));
+    back = output();
+    _titleSlot = contentChild(ClxPageHeaderTitleDirective, ...(ngDevMode ? [{ debugName: "_titleSlot" }] : /* istanbul ignore next */ []));
+    _hasCustomTitle = computed(() => !!this._titleSlot(), ...(ngDevMode ? [{ debugName: "_hasCustomTitle" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPageHeaderComponent, isStandalone: true, selector: "clx-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex items-center justify-between flex-wrap gap-3" }, ngImport: i0, template: `
-    <div class="min-w-0">
-      <h1 class="text-2xl font-(--clx-font-weight-emphasis) text-clx-text-label truncate">{{ title() }}</h1>
-      @if (subtitle()) {
-        <p class="text-sm text-clx-text-muted mt-0.5">{{ subtitle() }}</p>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPageHeaderComponent, isStandalone: true, selector: "clx-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, host: { classAttribute: "flex items-center gap-3 flex-wrap" }, queries: [{ propertyName: "_titleSlot", first: true, predicate: ClxPageHeaderTitleDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (showBack()) {
+      <button clx-button variant="ghost" [color]="_color()" icon="arrow_back" [iconOnly]="true"
+        (click)="back.emit()"></button>
+    }
+
+    <div class="flex-1 min-w-0 flex items-center justify-between flex-wrap gap-3">
+      @if (_hasCustomTitle()) {
+        <div class="min-w-0">
+          <ng-content select="[clxPageHeaderTitle]" />
+        </div>
+      } @else {
+        <div class="min-w-0">
+          <h1 class="text-2xl font-(--clx-font-weight-emphasis) text-clx-text-label truncate">{{ title() }}</h1>
+          @if (subtitle()) {
+            <p class="text-sm text-clx-text-muted mt-0.5">{{ subtitle() }}</p>
+          }
+        </div>
       }
+      <ng-content />
     </div>
-    <ng-content />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPageHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-page-header',
                     standalone: true,
+                    imports: [ClxButtonComponent],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'flex items-center justify-between flex-wrap gap-3' },
+                    host: { class: 'flex items-center gap-3 flex-wrap' },
                     template: `
-    <div class="min-w-0">
-      <h1 class="text-2xl font-(--clx-font-weight-emphasis) text-clx-text-label truncate">{{ title() }}</h1>
-      @if (subtitle()) {
-        <p class="text-sm text-clx-text-muted mt-0.5">{{ subtitle() }}</p>
+    @if (showBack()) {
+      <button clx-button variant="ghost" [color]="_color()" icon="arrow_back" [iconOnly]="true"
+        (click)="back.emit()"></button>
+    }
+
+    <div class="flex-1 min-w-0 flex items-center justify-between flex-wrap gap-3">
+      @if (_hasCustomTitle()) {
+        <div class="min-w-0">
+          <ng-content select="[clxPageHeaderTitle]" />
+        </div>
+      } @else {
+        <div class="min-w-0">
+          <h1 class="text-2xl font-(--clx-font-weight-emphasis) text-clx-text-label truncate">{{ title() }}</h1>
+          @if (subtitle()) {
+            <p class="text-sm text-clx-text-muted mt-0.5">{{ subtitle() }}</p>
+          }
+        </div>
       }
+      <ng-content />
     </div>
-    <ng-content />
   `,
                 }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }] } });
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }], back: [{ type: i0.Output, args: ["back"] }], _titleSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxPageHeaderTitleDirective), { isSignal: true }] }] } });
 
 class ClxProfileComponent {
     // ── Inputs ──────────────────────────────────────────────────────────────────
@@ -15755,5 +15819,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_FONT_WEIGHT_MAP, 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, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, 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_FONT_WEIGHT_MAP, 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, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map